How to set the background-position to an absolute distance, starting from right? [duplicate]

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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