Jump to content
Stef's Coding Community
Susie

2 Background Images

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 by Susie

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 by Eric

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...