CSS positioning: X px from bottom

April 7, 2005 6:36 PM

In CSS, is there any way to make the background image have a set distance from the bottom of the div?

I know how to set a distance from the top or left, or make it flush from the bottom or right, but not how to set a certain amount of pixels from the bottom.

posted by signal to Computers & Internet (14 answers total)

I'm not sure if there's a CSS solutino, thought there's a few javascript tricks which will work.

Have you though about simply using a GIF, putting as many transparent pixels as you need at the bottom of the picture, and positioning it flush against the bottom of the div?
posted by   at 6:54 PM on April 7, 2005

Response by poster: Have you though about simply using a GIF, putting as many transparent pixels as you need at the bottom of the picture, and positioning it flush against the bottom of the div?

Yep, that's what I'm doing now, but it's kludgy, and I'm looking for a more elegant method, particularly as I need to be able to change the picture's position and don't feel like making all those gifs.
posted by signal at 7:05 PM on April 7, 2005

I'm thinking you want to use absolute positioning and z-indexing to pull this off, but exactly how depends on what else you've got living in this div.

If it's mostly text, you could z-index all the text-containing elements with a high number, absolutely position the image within the div relative to the bottom, and give it a low z-index, yes?
posted by weston at 7:13 PM on April 7, 2005

You could use a javascript function in onLoad to get the div's offsetHeight, then add distanceFromBottom (variable -- whatever you want) and subtract it from document.body.clientHeight.
posted by Civil_Disobedient at 7:16 PM on April 7, 2005

Response by poster: Hmm, all that's a little bit of overkill when I'm actually trying to simplify the issue, and am using a CMS (typo3), so I don't want to mess with the actual XHTML, and I don't know what the client is gonna put inside the divs.
I guess there's no pure CSS method that doesn't imply changing the markup.
posted by signal at 9:02 PM on April 7, 2005

Well... you could create a second behind the containing , basically creating another background layer, but one to which you could apply the same absolute positioning technique I mentioned above.

Not super clean, but then you wouldn't have to worry about what the client did to the markup.
posted by weston at 9:14 PM on April 7, 2005

No javascript is necessary. (At least for the simple test I put together on my end)

Simply use a negative value for your "top:" property, and if you do not want the image to repeat in that 10px bottom zone, make sure you use the "no-repeat" attribute (or only repeat-y if the 10px zone is at the bottom)

e.g.:

/* bg.gif is a 100px square image */
#test {
width:100px;
height:100px;
background: red url(bg.gif) left -10px no-repeat;
}
posted by misterbrandt at 9:37 PM on April 7, 2005

you can use percentages (top left = 0% 0%, bottom right = 100% 100%).

So instead of

background: url(foo.gif) top left no-repeat;

you'd use percentages like this:

background: url(foo.gif) 85% 85% no-repeat;

(or 90% or whatever positions the graphic is about the right place).
posted by mathowie at 10:16 PM on April 7, 2005

misterbrandt's solution is very clever... but wouldn't you want the value to be -(pixels from bottom + height of image), since that's going to give position of the top of the image?
posted by weston at 11:44 PM on April 7, 2005

Response by poster: misterbrandt & mathowie, that's assuming the div has a fixed height, which it doesn't.

Doesn't X% set the distance from the top of the image to the top of the div? What I'm looking for is the distance from the bottom of the image to the bottom of the div.
posted by signal at 5:55 AM on April 8, 2005

Unfortunately, I do not believe that "positioning" a background image works the same way as positioning a div.

For example, with a div, you can say:
div {
positon:absolute;
bottom:10px;
}
which will shift your div UP 10px from its parent's bottom edge.

If you take a look at the specification (http://www.w3.org/TR/CSS21/colors.html#propdef-background-position), it looks like background image positioning is relative to the Top Left corner UNLESS you specify e.g. "bottom right" (which is actually equal to "100% 100%" from the Top Left)

But getting back to the question, signal, if you have a specific application in mind, maybe you could point us to a sample page or a code snippet or something?
posted by misterbrandt at 8:15 AM on April 8, 2005

Unfortunately, as coords for anything in CSS are from the top/left origin, a variable-height DIV poses a siginificant hurdle to the effect you seek.

Best solution: give the DIV an ID, then just include a javascript in each page that sees that ID, calculates its height once the page has rendered, then apply the background style as necessary.

Seems kludgy, but actually it keeps your code super-clean and compliant. Include the javascript much as you would an external stylesheet. Your actual docs wind up completely content-oriented.

Any enthusiastic javascripters out there wanna provide code?
posted by CaptApollo at 4:24 PM on April 8, 2005

I took a stab at applying three methods mentioned in this thread under IE & Firefox under windows:

(1) misterbrandt's negative-from-top idea -- I like the plan, but it doesn't seem to work. Negative background positioning just makes the image disappear, unless you have background-repeat turned on.


(2) mathowie's % method -- works pretty well. Though the positioning is only approximate, it stays pretty consistent despite changing the height of the div.

(3) my absolute positioning method -- works pretty well.

Although, something's causing the contents of the inner div to flow out beyond the boundaries of the outer div in Firefox. Hmmm.
posted by weston at 4:36 PM on April 8, 2005

Weston, Thanks for the test pages. This is a different scenario than I was picturing. My test page was a lot dumber. For the test you provide, i agree, my method will not work.

The problem with Mathowie's is scalability: a bg image positioned at, say, 90% from the top can only work with so many content heights.

If we allow that it may be worthwhile to use an <img> tag, then you can probably omit positioning, and simply add the necessary padding/margins to push it around to where you want it.

The other option would be to have some other element (a footer or something) that would be an additional element to hook the background image on. See this example page.

Signal, this demonstrates that the solution is highly dependent on the specifics of the problem (as with any CSS problem). Does any of this get you closer to a method that works for your application?
posted by misterbrandt at 12:51 PM on April 9, 2005