Why is CSS3 background image alignment in the wrong place?

Question

I use CSS3's background position to position the background image 3% from the right edge of the container. However, it looks in a different position compared to the fact that I have an equivalent container with a width of 97% when aligning the background image. You can see what I mean by http://jsfiddle.net/deshg/9qveqdcu/2/ , the logo in the black row is further to the right than the one in the green line, but, of course, they should be in such same horizontal position?

If someone can shed light on why this is happening, it will be widely appreciated.

For reference, below is the code.

Thanks everyone!

#container { width: 100%; background-color: #ffcc00; } #d1 { background-color: #cccc00; background-image: url('http://jsfiddle.net/img/logo.png'); background-position: right 3% center; background-repeat: no-repeat; width: 100%; } #d2 { background-color: #000000; color: #ffffff; background-image: url('http://jsfiddle.net/img/logo.png'); background-position: right center; background-repeat: no-repeat; width: 97%; margin-right: 3%; } <div id="container"> <div id="d1"> abvc </div> <div id="d2"> def </div> </div> 

Answer 1

The background image itself is shifted by 3% of its own width

From the docs :

Percentages relate to the size of the background positioning area minus the size of the background image; size refers to width for horizontal displacement and height for vertical displacement

Here is an illustration using 25% 25% ( from CSS tricks ):

Answer 2

The background position does not work as you think.

It is not as if, say, you had and positioned it to left: 50%; in this scenario, the left edge of the image would be half way. If you want to center it, you need to pull it to the left (negative translation or negative margin)

For a better understanding, see Link and Link

What are you trying to achieve, you need to install

 background-position: 96% 0px, center center; 

Fiddle