Give help. Get help.
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.
So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:
Unfortunately, it is necessary for my body to be relatively positioned (and #bg is directly in the body).
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.
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/
I see it’s on localhost so you can’t give us a link, could you post your code?
relevant css:
#bg
{
background: url(“../img/logo_watermark.png”) no-repeat;
width: 197px;
height: 166px;
position: absolute;
left: 0;
bottom: 0;
z-index: 0 !important;
}
html
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.
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.
You must be logged in to reply to this topic.