Why does CSS3 right aligned background image appear in the wrong place?

Question

I am using CSS3 background-position to position a background image 3% from the right edge of the container. However it appears in a different position compared to if i have an equivalent container that is 97% wide with the background image right aligned. You can see what i mean at http://jsfiddle.net/deshg/9qveqdcu/2/, the logo in the black row is further to the right than the one in the green row but surely they should be in the same horizontal position?

If anyone could shed some light on why this is happening it would be massively appreciated.

For reference, code is below.

Thanks all!

#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>

Good question, it seems to be a 1% off – George May 28 '15 at 11:19 — George, May 28 '15 at 11:19

Alex · Accepted Answer · 2015-05-28T11:36:39.540

4

The background image itself is being offset 3% of it's own width

From the docs:

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

Here's an illustration when using 25% 25% (from CSS Tricks):

enter image description here

edited May 28 '15 at 11:36

answered May 28 '15 at 11:20

Alex

8,353
9
45
56

I found `background-position: right 4% center;` on `#d1` aligned them – George May 28 '15 at 11:23
@GeorgeLee or setting `#d1 { width: 99.5%; }` ;) – Alex May 28 '15 at 11:25
Ah okay, thanks @Alex that make sense (although seems a strange way of doing it!) The problem with using 4% or 99.5% is it's responsive so this will not work at all sizes. Is there any way you know of to accurately align a background image a percentage from the right edge as this seems a strange omission? Thanks! – deshg May 28 '15 at 11:39
@deshg I'm sorry to say that there doesn't appear to be a CSS approach. I saw a `background-origin` property that I hoped would work but that's for a slightly different situation. – Alex May 28 '15 at 11:40
What a shame and how very irritating, i definitely thought this would be possible with CSS3! Thanks for your help @Alex, much appreciated – deshg May 28 '15 at 11:43
@deshg Personally, I'd just wrap the image in a div that you `float: right;` with `margin-right: 3%;`. – Alex May 28 '15 at 11:43
1

@Alex yeah that is the approach i'll have to use, i was just trying to avoid it to keep the markup as clean as possible but looks like it's the only way – deshg May 28 '15 at 11:44

score 1 · Answer 2 · answered May 28 '15 at 11:37

1

Background position is not working as you thinking.

It's different than if you, say, had an and positioned it at left: 50%; in that scenario, the left edge of the image would be at the halfway point. If you want to center it, you'll need to pull it back to the left (negative translate or negative margin)

For better understanding refer Link And Link

For what you trying to achieve you have to set

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

Fiddle

answered May 28 '15 at 11:37

ketan

19,129
42
60
98

Thanks @ketan, the problem is it's responsive so if you hard code values like this then it becomes out of line at most sizes. Seems very strange there is no way to align it properly using percentages in CSS3 :( – deshg May 28 '15 at 11:42
@deshg yes you right its something like hardcoded. :( – ketan May 28 '15 at 11:43

Why does CSS3 right aligned background image appear in the wrong place?

2 Answers2