I want to set a background image for a div, in a way that it is in the upper RIGHT of the div, but with a fixed 10px distance from top and right.
Here is how I would do that if wanted it in the upper LEFT of the div:
background: url(images/img06.gif) no-repeat 10px 10px;
Is there anyway to achieve the same result, but showing the background on the upper RIGHT?
I don't know if it is possible in pure css, so you can try
background: url(images/img06.gif) no-repeat top right;
and modify your image to incorporate the 10px border as a transparent color
There are a few ways you can do this.
Do the math yourself, if possible. You already know the dimensions of your image. If you know the dimensions of the div, you can just put the image at (div width - image width - 10, div height - image height - 10).
Use Javascript to do the heavy lifting for you. Pretty much the same method as above, except you don't need to know the dimensions of the div itself. Javascript can tell you.
A more hackish way would be to put a 10px transparent border around the top and right of your image, and set the position to top right.
One solution is to absolutely position an empty div, and give that the background. I don't believe there's a way to do it purely with CSS, no changes to the image, and no extra markup in a fluid layout.
Use the previously mentioned rule along with a top and right margin:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.
You can use percentages:
background: url(...) top 98% no-repeat;
If you know the width of the parent div it should be pretty easy to determine what percentage you need to use.