Jump to content
Sign in to follow this  
dmgusa

Background Changes With Browser Size

Recommended Posts

dmgusa    0
dmgusa

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

-Responsive with Pixel Width

-Fixed Width Mode

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

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
dmgusa    0
dmgusa

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa
#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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dmgusa    0
dmgusa

Thank you. I appreciate your help.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×