ansaurus

Question

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

Answer 1

+8 A:

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

CrazyJugglerDrummer 2009-07-01 19:42:41

For use with a background-image use (in addition to other background properties) 'background-attachment: fixed' (it works in FF2+, and I think Webkit, but I don't know about IE).

David Thomas 2009-07-01 19:53:15

This answer has been up-voted a lot, but it is actually not the answer to my original question that I asked about a year ago. What I asked was for the element to stick to the bottom right hand side of the *document* whereas fixed positioning makes the position relative to the *viewport*.

Deniz Dogan 2010-05-04 10:02:47

Answer 2

A:

If I understand you correctly, use the following CSS to get it in the right hand side and always at the bottom:

.bottom{
   position: relative;
   bottom: 0;
   float: right;
}

Is that what what you're trying to accomplish?

Peter 2009-07-01 19:43:15

Answer 3

A:

To add to the answer by @stevedbrown:

.bottom { z-index: 2; }

where 2, is just a higher z-index than the other page elements

casademora 2009-07-01 19:43:37

Answer 4

A:

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

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

Jonathan Sampson 2009-07-01 19:45:53

Answer 5

A:

<!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

dlamblin 2009-07-01 20:20:06

ansaurus

tags:

views:

answers:

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

related questions