Jump to content


Photo
- - - - -

Background Changes With Browser Size


  • Please log in to reply
12 replies to this topic

#1 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 30 April 2013 - 03:17 PM

I have an issue with my background.

 

Please Login or Register to see this Hidden Content

 

 

It's perfect on a maximized screen, but once i make the browser smaller, the background changes size and the layout goes out of whack  which I guess is normal for backgrounds. Is there a way to fix this so the background stays that same constant size and doesn't throw my layout off?

 

See image for what I mean. Thanks for any help.

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  96.44KB   9 downloads

 



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 April 2013 - 06:56 PM

What are you current layout settings set under PageLines > Site Options > Layout Editor?



#3 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 30 April 2013 - 08:09 PM

-Responsive with Pixel Width

-Fixed Width Mode



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 April 2013 - 11:11 PM

Hi there,

 

It looks like you've applied the background using the 'supersize' background feature in the Pagelines>site options>color control. This will resize your background depending on the height of the browser, you can uncheck this option to turn off the supersize background.

 

However, you're background image consists of the wood background and the paper overlay saved as one image. The dimensions of the page might not resize to the same dimensions of this image. The easiest way to get this to work properly would be to save the wooden background as the main background image. Then using css apply the paper effect background to the .page-canvas area using css, so it stays within the container when the page resizes.



#5 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 01 May 2013 - 03:52 PM

I did that, but the issue is that it won't extend past the content area. It won't go into the morefoot/footer. It just stops and I need it to go all the way to the bottom. Is there a way to do that? Thanks.

 

Please Login or Register to see this Hidden Content

 you can see it there, thanks!



#6 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 01 May 2013 - 04:11 PM

I know it'd work if i placed the same background in that morefoot area, but I already have that filled with the current background: those three pieces of paper behind each widget.



#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 04:17 PM

Maybe I'm not seeing it on my computer, but the background image goes down all the way to the bottom of the page. Can you please take a screenshot of your site and post it here?



#8 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 01 May 2013 - 04:25 PM

It did for a few minutes because I was fiddling with coding, but it got rid of the 3 pieces of paper in the morefoot area. Maybe that's what you saw. Here's a screen shot.

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  82.49KB   9 downloads

 



#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 04:53 PM

Ah okay, thank you.

 

The morefoot area is separate from the content area above it, so the background image won't continue to the bottom depending on what selector you're using to apply that background image. What is the CSS you're currently using for that?



#10 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 01 May 2013 - 04:58 PM

Please Login or Register to see this Hidden Content



#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 May 2013 - 06:57 PM

You will need to add your background to the #footer area, since morefoot is a part of #footer and #footer is separate from the page area.



#12 dmgusa

dmgusa

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 01 May 2013 - 11:45 PM

Thank you. I appreciate your help.



#13 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 May 2013 - 01:05 AM

Otherwise you could use a full width or universal sidebar inside the content area or page template are to hold your widget (instead of the morefoot), that way the background would go down behind the boxes/widgets.