Place background image 1em from the right?

Question

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.

Answer 1

The CSS3 background-position spec allows you to change the anchor point from the top left to anything you want. For example, the following will set the lower bottom corner of the image 1em from the right and 2px from the bottom:

background-position: right 1em bottom 2px;

Confirmed to work in:

IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

As of April 2013, only IE6-8 and some fringe browsers lack support.

Here's a test page: http://jsbin.com/osojuz/1/edit

Answer 2

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.

Answer 3

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.

Answer 4

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";