/dev/null

# April 11, 2009 at 5:47 pm

How would I get an image to be at the very bottom-left corner of the viewport? I tried making a div with height and width 100% and making it the background, but that only put it at the corner of the space used by the layout.

Code:

#bg
{
width: 100%;
height: 100%;
background-image: url(“../img/logo_watermark.png”);
background-repeat: no-repeat;
background-position: bottom left;
}

apostrophe

# April 11, 2009 at 6:15 pm

So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:

Code:

#bg {
background: url(“../img/logo_watermark.png”) no-repeat;
width: width of image px;
height: height of image px;
position: absolute;
left: 0;
bottom: 0;
}

/dev/null

# April 12, 2009 at 10:40 pm

"apostrophe" wrote:

So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:

Code:

#bg {
background: url(“../img/logo_watermark.png”) no-repeat;
width: width of image px;
height: height of image px;
position: absolute;
left: 0;
bottom: 0;
}

Unfortunately, it is necessary for my body to be relatively positioned (and #bg is directly in the body).

apostrophe

# April 13, 2009 at 1:55 am

Bottom left of the body is bottom left of the viewport.

/dev/null

# April 16, 2009 at 12:32 pm

But you said that it won’t work if #bg’s parent is relatively positioned.

Soh Tanaka

# April 16, 2009 at 12:34 pm

position relative on your body, is the same thing.

Do what apostrophe said and it should def work. Im assuming apostrophe was considering there may be parent divs that you had that had a relative position.

apostrophe

# April 16, 2009 at 12:54 pm

Quote:

Do what apostrophe said and it should def work. Im assuming apostrophe was considering there may be parent divs that you had that had a relative position.

Exactly. Although I suppose that technically it is, I don’t really consider the body to be a div. So long as your #bg isn’t inside any other divs in your markup eg. a container wrap then it will position absolutely, relative to the body whether you specify the body as position:relative or not.
Perhaps these 2 articles will help you understand positioning http://css-tricks.com/absolute-positioning-inside-relative-positioning/ and http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

/dev/null

# April 17, 2009 at 1:41 pm

Odd. It doesn’t work for me. Here’s the image of what it looks like (ff 3.0.8 on ubuntu 8.10)

apostrophe

# April 17, 2009 at 2:03 pm

I see it’s on localhost so you can’t give us a link, could you post your code?

/dev/null

# April 17, 2009 at 6:31 pm

relevant css:

Code:

body
{
background-image: url(“../img/bg.png”);
background-color: #2e3436;
line-height: 1.3076923076923077em;
position: relative;
}

#bg
{
background: url(“../img/logo_watermark.png”) no-repeat;
width: 197px;
height: 166px;
position: absolute;
left: 0;
bottom: 0;
z-index: 0 !important;
}

html

Code:

–snip–

–snip–

–snip–

–snip–

–snip–

apostrophe

# April 18, 2009 at 2:57 am

Well I just tried this with an old page I had on my hard drive. Without position: relative on the body it works perfectly and with position: relative on the body it stays on the extreme left of the window but only goes as low as the content, which I must admit surprised me.
So the question is why do you need that position: relative on the body? Try removing it.

/dev/null

# April 18, 2009 at 12:53 pm

I need my body to be relatively positioned so my sidebar remains as tall as my main content. If I remove it, the sidebar will be all out of whack (it’ll extend all the way up and down).

apostrophe

# April 18, 2009 at 1:23 pm

Interesting approach. New one to me.

You might want to look at some of the more traditional methods
http://www.alistapart.com/articles/fauxcolumns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
or even jQuery
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
Otherwise I really don’t see how you can have your #bg in the bottom left corner.

/dev/null

# April 18, 2009 at 5:37 pm

Thanks. I don’t quite remember where I got this method (maybe from css tricks?) but I’ll take a look at those.