Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Setting an image to a fixed central postion at bottom of screen

    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?
    Regards,

    Tony Dunne
    Kingdom Web Services

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    something like this


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

  • #3
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?
    Regards,

    Tony Dunne
    Kingdom Web Services

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    in the css, it should go in ur external file or in your head.

    html

    Code:
    <div id="imgFix"></div>
    i believe that would work

  • #5
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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 :
    Code:
    <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?
    Regards,

    Tony Dunne
    Kingdom Web Services

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    looks right, did it work for you?

  • Users who have thanked jcdevelopment for this post:

    kingdomweb (02-18-2008)

  • #7
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I think so. Will need to check it in FF but seems OK in IE7. Thanks for your help!
    Regards,

    Tony Dunne
    Kingdom Web Services

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no problem, hope everything works out!!

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Attached Thumbnails Attached Thumbnails Setting an image to a fixed central postion at bottom of screen-sshot.jpg  
    Last edited by abduraooft; 02-18-2008 at 08:29 AM. Reason: upload size limit blocked my first attempt...
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    kingdomweb (02-22-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •