27

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?

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44
bahadorn
  • 528
  • 1
  • 4
  • 11

8 Answers8

34

In all modern browsers and IE down even to version 9 you can use a four-value syntax, specified in CSS3:

background-position: right 10px top 10px;

Source: MDN

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
17

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.

roryf
  • 29,592
  • 16
  • 81
  • 103
  • This is a good solution, but since I wanted to display the border this would have required wrapping another non-semantic div. I ended up using an tag instead of a css background and that worked well for me in the end. – doub1ejack Jan 25 '12 at 18:07
  • In my case I found `padding-top` and `padding-right` was the solution for positioning a small icon after a span. – Zak Henry Mar 19 '12 at 21:11
  • This can work, but it has other side effects. A background color will not span the entire element, nor will you be able to have text in the element which fills the last 10px. – MW. Jul 04 '13 at 13:43
10

There are a few ways you can do this.

  1. 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).

  2. 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.

  3. 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.

Justin Poliey
  • 16,289
  • 7
  • 37
  • 48
6

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 a 10px border on the top and right in a transparent color

Eric
  • 95,302
  • 53
  • 242
  • 374
mathieu
  • 30,974
  • 4
  • 64
  • 90
1

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.

Rahul
  • 12,181
  • 5
  • 43
  • 64
  • I was surprised to learn that 100% is the same as 'right' for background-image, however if the width of the parent div is fixed, then it is more exact to directly use a pixel offset. – EoghanM Dec 01 '10 at 12:26
  • no percentage will not work if you have different widths for itmes – Jitendra Vyas Apr 23 '12 at 06:42
0

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.

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
0

You can fake the space on the right hand side with a border in pixels (white most of the time or maybe something else)

  background-image: url(../images/calender.svg) center right
  border-right: 5px white solid
Hichem ben chaabene
  • 145
  • 6
-2

The correct format is:

background: url(YourUrl) 0px -50px no-repeat;

Where 0px is the horizontal position and -50px is the vertical position.

CSS background-position accepts negative values.

Luca
  • 9,259
  • 5
  • 46
  • 59
Teatra.co
  • 1