Jump to content


Photo
- - - - -
Resolved

background image tile not fill entire page

background image

Best Answer Danny , 08 October 2012 - 07:11 AM

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%;
}
Go to the full post


  • Please log in to reply
7 replies to this topic

#1 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 07 October 2012 - 02:15 PM

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

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 October 2012 - 02:17 PM

Hi,

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

#3 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 07 October 2012 - 03:19 PM

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.

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 October 2012 - 09:23 PM

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:

Please Login or Register to see this Hidden Content



#5 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 08 October 2012 - 12:42 AM

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:

Please Login or Register to see this Hidden Content



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.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 October 2012 - 07:11 AM   Best Answer

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.


Please Login or Register to see this Hidden Content


  • aaronmmg likes this

#7 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 08 October 2012 - 09:21 PM

That worked Danny. Thanks!

#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 09 October 2012 - 12:16 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, background image