2 Background Images

[Susie]

I need some help thinking this through and was hoping someone here could offer some insight.

 

http://tinyurl.com/4srdoqu

 

This is very much a work in progress. Many thanks to Ben for helping me with the stones image at the bottom!

 

Okay, I want to move the stones up so that they start about 10-20 pixels below where you see "Hello World." So, I want it behind the content container. But I'm unsure how to do this since I already have a background image on the body.

 

Thoughts?

[falkencreative]

Could you add it to "#wrap" (positioned: bottom center repeat-x;), and add approx 200px bottom padding to #wrap so that it is positioned correctly?

[Susie]

I didn't even think of adding it to the #wrap. Thanks, Ben. I have it where I want it, but on short pages like this one, it doesn't stay at the bottom of the screen. Wonder what I can do about that.

 

Edit to add: Actually, it's positioned where I want it on the short pages (but needs to extend to the bottom of the browser). On longer pages, it's too low.

Edited February 17, 2011 by Susie

[falkencreative]

Hmm. Actually, I remember thinking this would be a problem, and forgot to mention it... Ultimately, you really can't control exactly where that image falls, since the content length would change per page. I would probably place it in a div with 100% height (see http://www.dave-woods.co.uk/?p=144 for an example) and have the image anchored to the bottom of the browser. Adjust the bottom padding on #wrap to optimize for long pages, and the background image will just display at the bottom of the browser on short pages.

[BeeDev]

Use the following CSS:

 

html, body, #wrap { height: 100%; }

 

and remove the bottom padding on #wrap. Only tested on Firefox as only Firebug allows live editing

[Susie]

Use the following CSS:

 

html, body, #wrap { height: 100%; }

 

and remove the bottom padding on #wrap. Only tested on Firefox as only Firebug allows live editing

 

I tried this, but it doesn't work on the longer pages.

 

Ben, thanks for the link, but I can't get that to work either.

 

I'll be back!

[BeeDev]

In that case min-height should work.

[Susie]

http://tinyurl.com/4srdoqu

 

It's still not working on the longer pages.

 

(Thanks for your help!)

[PicnicTutorials]

Looking quickly, it looks like you just need like a sticky footer. And take off the padding bottom on the #wrap. If you still need it put it on the body instead.

 

html, body {

height:100%;

}

#wrap {

min-height:100%;

}

* html #wrap {

height:100%;

}

Edited February 18, 2011 by Eric

[Susie]

Thanks, Eric! I think I was getting confused because the background is not actually on the footer, so I didn't think a technique like that would work. All fixed!