Background Changes With Browser Size

[dmgusa 0]

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.

 

 

[catrina 103]

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

[dmgusa 0]

-Responsive with Pixel Width

-Fixed Width Mode

[James B 436]

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.

[dmgusa 0]

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!

[dmgusa 0]

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.

[catrina 103]

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?

[dmgusa 0]

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.

 

 

[catrina 103]

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?

[dmgusa 0]

#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'); }

[catrina 103]

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.

[dmgusa 0]

Thank you. I appreciate your help.

[James B 436]

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.