Archived

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

  • 0

Resolved background image tile not fill entire page


Question

Posted · Report post

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).

post-11321-0-77700600-1349656661_thumb.j

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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%;
}[/CODE]

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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 {

background-image:url('http://www.epicurus.com/members/wp-content/uploads/2012/09/backTile.gif');

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.)

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

That worked Danny. Thanks!

Share this post


Link to post
Share on other sites