Image Always at Bottom of Browser Window

[dbstudios]

Hello,

I am currently in the process of building a company website - www.liquidbeancoffee.com. On the page I have put an image at the bottom of the page and I used to following code in order to do this:

<img src="bottombar.png" width=100% img style="position:absolute; bottom:0; left: 0;">

Basically what I am trying to accomplish is to have this image always stay at the bottom of the page, resizing (width=100%), to fit various screen resolutions, and most importantly have the content on the page scroll behind the image - so that when a user scrolls down to read the content on the page it is coming up from behind the image. So I don't think I want to put the image on the page as a CSS background because then the content will scroll up in front of the image, because the image will be a background.

Right now with the code that I am using if I add content going down the page the image at the bottom (bottombar.png), does not stay in place at the bottom of the page. When I scroll down the image moves with the text and I don't want that.

So is there any way to force the image to stay always at the bottom of the page, with the content behind it? And also, I would like the image to resize the the viewer's screen resolution as well.

I also know that PNG files don't show up well in Internet Explorer but I will fix that after I get this problem solved.

Any help would be greatly appreciated!

Thank you!

[VIPStephan]

position: fixed; is the answer.

But it's not working in IE... there are workarounds but I can't remember exactly...
Do a Google search on "position: fixed for IE" - or search these forums. :)

[bustamelon]

I know IE's support for PNG is limited -- just not exactly sure in what way. This could be contributing to the problem.

I would suggest making that image part of the body background, and used fixed as VIPStephan says, but also use coordinates (for lack of a better word):

two possibilities:

<img src="bottombar.png" width=100% img style="position: fixed bottom right no-repeat; ">

OR

body {
background: #663300 url("bottombar.png") bottom right fixed no-repeat;
}

[dbstudios]

Thank you for your quick response! The solution you guys gave me worked perfectly, at least in Firefox. I replaced position:absolute with position:fixed and that worked great.

Here's the code that works:

<img src="bottombar.png" width=100% img style="position:fixed; bottom:0; left: 0;">

I'll try to see if I can find a workaround for IE so that it will display correctly.

Thanks again! I really appreciate the help.

[kewlceo]

Yes, beautiful page design. You'll probably want to change the PNG to a GIF since IE cannot handle PNG transparency yet. Also, take a look at the page in 800x600 res. Gorgeous work though.

[VIPStephan]

I know IE's support for PNG is limited -- just not exactly sure in what way.

It's just the alpha transparency... That means that if you have a smooth transition from a color to opacity in one image all browsers will allow to let the background color shine through except of IE which will apply some kind of greyish background... (at least that's what I noticed)

PNGs as such aren't that problematic. They are even better than GIFs most times because of better quality with lower file size at the same time.

I forgot to mention that there is a workaround to allow PNG transparency in IE too: http://www.alistapart.com/articles/pngopacity/