View Full Version : Setting an image to a fixed central postion at bottom of screen

02-18-2008, 12:30 AM
I am designing a website www.susieconwayinteriordesign.com and want to add an image that will always be seen at bottom of screen and centralised no matter what screen size is used. The image is a transparent .png to allow background image to be seen behind it. Does anyone know how I can acheive this effect?

02-18-2008, 12:46 AM
something like this

#imgFix {
margin:0 auto;
background-image:url(link) bottom center;

try that!!

02-18-2008, 12:57 AM
Thanks. I will try it but does this go in the css or the head tag? Do I need to create a div called imgFix and where does this go in the body tag?

02-18-2008, 01:22 AM
in the css, it should go in ur external file or in your head.


<div id="imgFix"></div>

i believe that would work

02-18-2008, 01:29 AM
I think I have it : http://www.susieconwayinteriordesign.com/index.html. I have added it to external css file and have added the <div id="imgFix"></div> but I then had to give the layer the size of the image for it to appear. Also the images was not centralised on my screen so to do this I had to add the following in the head tag :
<style type="text/css" media="screen"><!--#layer1 { background-image: url(images/img_title.gif); width: 100&#37;; left: 0; top: 39px; position: absolute; visibility: hidden; }
#imgFix { position: fixed; bottom: 0; margin: 0 auto; background-image:url(images/susie.png); right: 43%; width: 161px; height: 259px; visibility: visible; }

Is this correct?

02-18-2008, 01:33 AM
looks right, did it work for you?

02-18-2008, 01:36 AM
I think so. Will need to check it in FF but seems OK in IE7. Thanks for your help!

02-18-2008, 01:46 AM
no problem, hope everything works out!!

02-18-2008, 08:16 AM
position:fixed; won't work in IE(at least in IE6 AFAIK ;) ).In IE6, that image resides below the footer(look at the screen shot)
You may have to use position:absolute; and some fixed width+height instead, but before that you have to remove those tables used for your layout. http://bonrouge.com/3c-hf-fluid.php may be useful.