Jump to content

background image tile not fill entire page

Recommended Posts


When uploading a backgtound image and select the tile option, the footer area remains white. I would like for the same background to fill the entire page (like it does when you supersize the image).


Share this post

Link to post
Share on other sites


Can you provide a link to the site in question please, as the image doesn't give us much to go off.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Thanks for the reply Danny,

The site is not public yet. Plus I have it rigged with the code below so my client can view what it will look like (not with the white block at the bottom).

The image I attached earlier just shows that the footer is white. It happens on every pagelines install by defalut. As soon as you upload a background image you can see it.

Below is the code I added to custom CSS to sort of rig a fix, but the footer background iimages are not seemless with the standard background image and adds too much space to the bottom,because of the 500px height. But if I make the height smaller, the white shows up at the bottom, and is likely different for every monitor.

#footer {

background-image: url(http://..../bg.jpg) !important;

background-position: center bottom;

height: 500px !important;  


Share this post

Link to post
Share on other sites

It looks and sounds to me like you have an incorrect Layout selection for the type of things you're trying to achieve.

Under Dashboard > PageLines > Site Options > Layout Editor please set your site's Site Design Mode to Full-Width Sections. This allows any section to which you've added a background to have a full-width effect.

I use this in my footer and it works perfectly, edge to edge:

#footer {



Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Thanks for the reply Rob.

I do have the site set to "full width layout". There is no problem with the background tile left to right. But as you can see in the image in my first post, the background image just stops where the footer starts. I do not want to have to put an additional background image in the footer. The combination just doesn't match up seemlessly. (it is the same background image for both).

Essentially, what I am trying to do is use the Pagelines Framework to replicate the basic layout from this site: http://www.sakyongladrang.org/

See how the tiled background image covers the whole page and there is visually not a separate footer area below the whiter box?

Simple right?

However, when I upload the little yellow bg image in pagelines color options I am left with a big white area underneath where the footer is. I am trying to get rid of that without adding a background image to the footer. I hope this explains my situation a little better.

(I have replaced the image in my first post above which hopefully is a better representation of what I am talking about.)


Share this post

Link to post
Share on other sites

Basically, what is happening is that the Background image uploader, as the image to the page-canvas area. This means that when you use Full Width Sections, the Footer area will use the bodies background color, which is white by default.

So you can either change to Fixed Width, which will continue your background image into your footer. However, if you wish to continue using the Full Width Sections layout, you will need to remove your uploaded image and use the following CSS instead.

body {
background-image: url(URL to Image);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;

  • Like 1

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

The topic was marked as resolved.

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict


Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • 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.
    • jeomiland
      By jeomiland+
      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:
    • hibbsy78
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?