Forums

/dev/null

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.


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

apostrophe

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

#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

"apostrophe" said:
So long as your div#bg is not inside any relatively positioned divs in your markup then you can do this:
#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

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

/dev/null

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

Soh Tanaka

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

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

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

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

/dev/null

relevant css:


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


	<body>
	<div id=\"wrapper\">

		<div id=\"header\">
--snip--
		</div><!--header-->
		<ul id=\"nav\">
--snip--
</ul>
	<div id=\"contentwrapper\">
		<div id=\"content\">
--snip--
</div><!-- content -->
			<div id=\"sidebar\">
--snip--
			</div><!-- sidebar -->
		</div><!-- content-wrapper -->
		
		<div id=\"footer\">
--snip--
		</div><!-- footer -->
	</div><!--wrapper-->
	<div id=\"bg\"> <!--this is necessary for the watermark-->
	</div><!--bg-->

	</body>

apostrophe

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

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

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

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

treehouse : what would you like to learn today?

Forums

Trying to get image at very bottom left of viewport