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).
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/
background: url(“../img/logo_watermark.png”) no-repeat;
z-index: 0 !important;
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
or even 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.
*May or may not contain any actual "CSS" or "Tricks".