Archived

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

  • 0

Background Changes With Browser Size

Question

Posted · Report post

I have an issue with my background.

 

http://www.digitalmediagiant.com/

 

 

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.

 

post-40018-0-65893300-1367335031_thumb.j

 

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

-Responsive with Pixel Width

-Fixed Width Mode

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://digitalmediagiant.com  you can see it there, thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

post-40018-0-57653600-1367425519_thumb.j

 

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

#morefoot {
  background-image:url('http://www.digitalmediagiant.com/wp-content/uploads/2013/04/morefoot-bg.png');
			background-repeat: none;
  background-position: top center;}

body #page .page-canvas { background: url ('http://www.digitalmediagiant.com/wp-content/uploads/2013/05/content-bg.jpg'); }

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you. I appreciate your help.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites