...

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



kingdomweb
02-17-2008, 11:30 PM
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?

jcdevelopment
02-17-2008, 11:46 PM
something like this




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


try that!!

kingdomweb
02-17-2008, 11:57 PM
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?

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

html



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


i believe that would work

kingdomweb
02-18-2008, 12: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?

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

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

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

abduraooft
02-18-2008, 07: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum