tags:

views:

510

answers:

3

As far as I can tell, it is not possible to place a CSS background image 1em from the right border of any block, neither is it possible to place a image 1em from the bottom.

The following code places the background image 1em from the left and 2em from the top.

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
  Some text here
</div>

Is there any way in CSS to specify that the background image should be "this far from the right edge" if the size of the box is dynamic and assuming that you cannot change the HTML?

(Percentages won't work, since the box can change size)

If this is not possible, what is the smallest amount of change you need to make to the HTML?

This is the workaround I came up with:

<style>
div.background
{
  float: right; 
  background: url('bar.png') no-repeat top left; 
  margin-right: 1em; 
  width: 16px; 
  height: 16px;
}
</style>
<div class="foo">
  <div class="background" style="">&nbsp;</div>
  Some text here
</div>
A: 

After some research the actual x pixel length of the background position is always counted from the left side of the element. The only way to make this work (without using other elements) would be to use javascript, calculate the left length given the elements width:

var rightMargin = "10"; // in pixels
var imageWidth = "16";
var left = element.style.clientWidth - imageWidth - rightMargin;

element.style.backgroundPosition = "0px " + left + "px";
Luca Matteis
This misses the point somewhat, as it does not allow a 1em "padding" between the background image and the edge of the block.
Vegard Larsen
Well you can set that with background-position, and then also use background-position-x to align it to the right.
Luca Matteis
Actually, the way I read the documentation, background-position-x is simply a wrapper for background-position. Changing one overrides the other. Also, it is only supported in IE/Safari.
Vegard Larsen
For example: background-position: top right; background-position-x: 10px 10px;Not sure if that will work though, you can try.
Luca Matteis
I just tried it in the Tryit-editor you linked, it doesn't work in Chrome. Not even when using Javascript.
Vegard Larsen
You're right, sorry about that, I added a Javascript solution if it's something you'd like to consider.
Luca Matteis
+1  A: 

You could try something like this:

<style type="text/css" media="screen">
    #outer {
     position: relative;
     top: -1em;
     left: -1em;
     margin: 1em 0 0 1em;
     outline: thin solid #F00;
     background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%;
    }
    #inner {
     outline: thin solid #0F0;
     position: relative;
     top: 1em;
     left: 1em;
    }
</style>

<div id="outer">
    <div id="inner">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Edit: Looking forward to CSS 3 background-position.

Gumbo
This will work, but it is longer than my original suggestion, but it can probably be shortened.
Vegard Larsen
+3  A: 

Elements with position: absolute; can be positioned by their right edge. So, if you don't mind a minor change to the html, do this:

<div id="the-box">
    <img id="the-box-bg" src="bar.png" />
    Text text text text....
</div>
(...)
#the-box {
    position: relative;
}
#the-box-bg {
    position: absolute;
    right: 1em;
    z-index: -1;
}

You could of course also use absolute positioning of a second div, with a repeating background. But then you would have to set the size of the (inner) div in CSS.

gnud