Is it possible to position a background image relative to bottom-right rather than the top-left without using percentages? I want to achive this:

|--------------|
|              |
|              |
<unknown height>
|              |
|           *  |
|--------------|

Where the asterisk represents the image I want to position....

Update (boy, what a poorly written question): I want to position the image 8px from the bottom right, so "bottom right" and "100% 100%" won't work. Also, I'm trying to avoid just adding padding to the image itself, if possible. (I'm pretty sure it's not possible.)

3 answers

3
points

If you're always going to position this image the same way, you could always add 8px of "padding" to the image itself on the bottom and right, then position it bottom right - this would achieve what you want with a slightly bigger image (negligible size increase in a reasonable format).

Answered almost 10 years ago by John Bragg
1
point

You could also use keywords such as top, left, right, bottom.

In your case like this: background-position: right bottom;. This is essentially the same as 100% 100%.

Answered almost 10 years ago by Jens Hedqvist
  • Yeah, see my update for why that won't work. (Sorry -- incomplete question.) sprugman almost 10 years ago
  • Combine this with John Bragg's answer and you've got your solution. Dwayne Anderson almost 10 years ago
Doug 1095
1
point

I assume from your question that you want the background image a certain number of pixels from the bottom right corner. This is why percentages or keywords won't work. With percentages the distance will change when the container size changes.

Try editing the background image so that it has whatever margin you need as part of the image. Then position the image at bottom right.

Answered almost 10 years ago by Doug