CSS: Image sticking to the bottom right hand side of the document

This is a very common issue. solution: position: fixed. This does what you said, makes sure the item ALWAYS appears in a certain position. Use

position: fixed;
bottom: 0px;
right: 0px;

So the will always appear in the bottom right. idk if you can do this with a background image, but this meets your requirements. its not supported in IE 6 (but then again, what is?). see here for an example. scroll up and down the page. Notice how the image is always in at the bottom of the browser window. Also make sure your z-index is adequately large if you don't want things to flow over it. :D


<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>test bottom right fixture</title>
    </head>
    <style type="text/css">
    body{margin: 0;}
    #top,#middle,#bottom{width:100%;}
    #top,#bottom{height:200px;}
    #middle{padding-bottom: 200px;}
    #bottom{position: fixed;right:0;bottom:0;}
    .red{background-color: red;}
    .green{background-color: green;}
    .blue{background-color: blue;}
    </style>
    <body>
    <div id="top" class="red">
      Lorem ipsum dolor sit amet
    </div>
    <div id="middle" class="green">
      Lorem ipsum dolor sit amet
    </div>
    <div id="bottom" class="blue">
      Lorem ipsum dolor sit amet
    </div>
    </body>
</html>

This works with both short middle content as shown, or more verbose middle content like Lorem ipsum.

There is an issue where if the page height is higher than 3*200px+middleContentHeight you will see a white gap between the green and blue blocks. This is easily fixed by declaring a background-color for body.


<img src="beta.jpg" class="specialImage" />

.specialImage{
  position:fixed;
  bottom:0;
  right:0;
  z-index:100; /* or higher/lower depending on other elements */
}

Tags:

Html

Css

Recent Posts