How Do I Absolute Position An Image?

HTML & CSS
1

I’m trying to include a background image and absolute position it into my web page in the bottom left corner. I have my image HTML in my text DIV, which is inside a container DIV, and want the image to align to the bottom left of the text DIV. As it is right now, the image isn’t even showing. How do I correct this?

CSS

#woman {
background-image:url(woman.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
}

HTML

<div id="woman">
 </div>
2

Lastly if you just want the text to stay to the side then do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
    width:400px;
    position:relative;
    border:1px solid #000;
}
.img {
    position:absolute;
    bottom:0;
    left:0;
    width:100px;
    height:100px;
    background:red;
}
.outer p{margin-left:110px;}
</style>
</head>
<body>
<div class="outer">
    <p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
    <div class="img">Image</div>
</div>
</body>
</html>

Hope one of those is what you want :slight_smile:

3

Our posts probably crossed but yes I mentioned that as a probably cause :slight_smile:

It is worth re-iterating though that the image will only show when the element happens to be over the exact part of the viewport (bottom left) because it is being placed using background-attachment:fixed.

I’m guessing that fixed wasn’t what the op intended anyway :slight_smile:

4

If the bottom float is what you are looking for then Erik J posted a scripted version a while ago that looked like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Float Pushed to Bottom</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#wrapper {
    margin: auto;
    border: 1px solid #cc0;
    width: 80&#37;;
    overflow: hidden;
    background: #ffc;
}
#wrapper p {
    margin: 10px 10px 0;
    text-align: justify;
}
.floatpusher {
    float: left;
    margin-bottom: -129px; /* the bottomfloat height + margin = float to bottom */
    width: 1px;
}
#bottomfloat {
    clear: left;
    float: left;
    margin: 19px 10px 10px; /* margin-top as default line-height to avoid overlap */
    border: 1px solid #cc0;
    width: 200px;
    height: 100px;
    background: #ff9;
}
</style>
<script type="text/javascript">
function floatpush(){
    var els = document.getElementsByTagName('div'),
        elsLen = els.length,
        el,
        i;
    for (i = 0; i < elsLen; i += 1){
        el = els[i];
        if (el.className.indexOf('floatpusher') > -1){
            el.style.height = "auto";
            el.style.height = el.parentNode.offsetHeight + "px";
        }
    }
}
window.onresize = floatpush;
window.onload = floatpush;
</script>
</head>
<body>
<div id="wrapper">
    <div class="floatpusher"></div>
    <div id="bottomfloat"></div>
    <p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
    <p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
</div>
</body>
</html>
5

Hi,

I think I may understand what you want and if I’m correct then the answer is that it isn’t possible.

If you want an image to always be at the bottom of an element such as a div but at the same time you want the fluid text to wrap around the image automatically then this isn’t possible (without scripting).

You can approximate the effect by placing the image at a point in your text where floating it would cause it to just happen to be at the bottom. That means in a fluid layout it wouldn’t work because the text would change as the page is resized. It also assumes that the length of text will never change.

It’s easy to place something at the bottom left but it’s not easy to make the content above avoid it. The only way would be to move the text to the right so that it stays clear of the image altogether.

If you look at this example it places a message at the bottom of a column. However we cannot make the text wrap around it.

Or you can put text to the bottom of an image as shown in these other examples.

http://www.pmob.co.uk/temp/text-at-bottom2.htm
http://www.pmob.co.uk/temp/text-to-bottom-of-image.htm

None of which I think is what you want though.

I think you are looking for this following effect which I have only ever managed to achieve in Firefox 3.5+:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">
h1{text-align:center;}
body{line-height:1.2}
.test {
    text-align:justify;
    width:50&#37;;
    margin:auto;
    border:4px solid red;
    height:105px;
    display:table;
    line-height:25px;
    background:#EEE;
}
.test p {
    margin:0;
    padding:10px;
}
b {
    float:right;
    width:3px;
    height:100%;
    margin-bottom:-115px;
    display:table;
}
span {
    width:98px;
    height:98px;
    float:right;
    border:2px solid red;
    margin:0 5px 0 5px;
    clear:right;
    position:relative;
}
</style>
</head>
<body>
<h1>Float bottom in Firefox 3.5 only</h1>
<div class="test"> <b></b><span>float</span>
    <p> START text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>

No other browsers support it so its not much use.

If none of those are what you want then perhaps we need a more detailed description of the behaviours you are looking for as it may be simpler than I am thinking :slight_smile:

6

Your <div> is empty, so it has no dimensions. Start putting some content in there, and you should see things happening.

7

Okay…I took a different approach with this. I need text to appear to the right of the image so I made the image a regular image with a float:left. The image just now needs to be positioned so the bottom of the image is at the bottom left of the DIV the image is in.

How do I accomplish this?

8

Hi,

There are a number of things we’d need to know before telling you how this would work :slight_smile:

The first thing I can say is that a “fixed” background image is always placed in relation to the viewport. It is not placed at a position in the div that it is applied to. That means that your #woman background image will only show when it is at the bottom left of the viewport. If that element is not at the bottom left of the viewport then no image will show.

The element will also need to be sized of course otherwise it has no width or height and nothing will show anyway.

If you want an image at the bottom left of the viewport then apply it to the body element instead.

If on the other hand you want an image at the bottom left of a container then just apply it as a normal background image on that container (not background-attachment:fixed). No need to add a special element just to hold the image just use the container that you are trying to place something at the bottom of.

If the container already has a background image and you want to absolutely place another image in the bottom left corner then you can absolutely place a child div there by first setting the main container to position:relative. Then absolutely place the child element at bottom:0 and left:0. Make sure you size it to fit the background image that you want placed there. (You could instead just nest another div inside the container and use that for a second background image and place the image at bottom left.)

If none of those fits your scenario then you will have to clarify a little more :slight_smile: