Jump to content


This topic is now archived and is closed to further replies.


Make page background fill whole screen

Recommended Posts



Have a couple clients who are having background image issues. This should be a basic question so hope fix is easy. How do you get a specified image to auto resize so it fills the browser screen? Client has portrait-format image that's 1000x1000 and the left and right are displaying the background color (white) on my 1440 wide Macbook pro, as it is on client's computer. She has tried clicking "Fit image to page" and repeat background - neither is getting what she expects.  I suggested trying a landscape-format image.

But the larger question is this - how does one plan a proper background image that will fill the whole screen - left to right - in the browser image and have it scale appropriately?  Should one always have landscape background images? What about scrolling vs not scrolling BG? How plan your BG image so it will fill the screen on laptops, ipads, iphones...  both in landscape and portrait format? Is it true that you can't do it? that either the left-right or top-bottom are cut off depending on the device and orientation?

2 sites where this needs resolution:



Share this post

Link to post
Share on other sites

Any clue how I can get the top banner of cassclayton.com/dev to look consistent on different browsers? Client's PC shows it ok in Chrome but IE cuts off important design elements (faces of blues musicians, the dotted line, top of her head,...) and her husbands PC also displays with cutoff (same screen resolution) - further, the 2 columns have vastly different widths on different PC browsers. Used your "cover" css for background, thanks, but still have these other browser-dependant, display issues going on. For the 2-columns, I have a style applied to each column that gives me the see-through effect and a padding that let's the content look nice inside the column boxes. However, this requires I set the 12/12 DMS dimensions to like 8/12 and 3/12 (8+3=11) else right column wraps under the left column...  Perhaps I need to stop using padding on columns style and use a margin spacing on inner elements? since it seems padding is added to an element's width rather than using the specified width as a Hard Stop.

Thanks for any thoughts.   je

Share this post

Link to post
Share on other sites

Hi @jeomiland,

I noticed that your are using the revslider to display that single image you may want to consider using a mediabox.

The revslider IMO is not the best option unless you plan to add more image but even then the revslider will adjust based on the window size. So try the mediabox and see if thats helps

As for the column with the padding try adding  box-sizing: border-box; to your class for the columns and set things to  8/12 and 4/12 and it should make things right. 

.myMainCanvaseSeethrough {
    box-sizing: border-box;



Visit iheartpagelines.com for the latest tutorials on PageLines related products.


Share this post

Link to post
Share on other sites

Thanks again.  (How did you learn all this stuff???)

Ah yes, I had the PageHeader up there first then put in Revslider to see if that worked better and it seemed to help a bit. Trying Mediabox now...  oh, now I see Media box is CONTENT width - only FULL width stuff I see is PLNextbox, Pageheader, Revslider.  I need that header area to be full-width and responsive, but to show the whole banner image and not cut off parts of it. Any ideas? Maybe Nextbox with width and height set to 100%, but then that could distort it, huummm...

Share this post

Link to post
Share on other sites

  • Similar Content

    • fancoder
      By fancoder+
      Hi I can't seem to get the background image for the Tour Guide section to be clear. It is always blurry. Any idea why that is? I am using a high res image. Is it a sizing issue? Thanks 
    • SaschaM
      By SaschaM+
      sorry. i got a problem on my site i can not fix myself, would be nice somebody can help.
      I use:
      - Platform 5 (latest) Pro
      - Pagelines Framework (latest for Platform 5)
      - keycdn (cdn enabler, cache enabler und optimus WebP)
      - my site:  example
      The background image i use in the Impulse Section is not beeing replaced automatically if i specify a CDN Url. I need to put in the cdn url to the image manually. Why?
      If you look in the button of the the side you see post grid section, where i have no problems. You also see there WebP Images working.
      Now i can not really use the direct cdn url for the impulse background image, cause i want to benefit there from WebP Image also in the background as it works in post grid section.
      How does it works with Impulse? The webP image for the background is ready to use.
      Thank you.
    • crose
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • hibbsy78
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?

    • dawsonbarber
      By dawsonbarber+
      Under PageLines > Settings, it looks like the actual setting for the background image tile size is missing.