Is there a way to position a background image relative to the centre of an element?

Question

I have an element that I wish to apply a background to, though I want the background image to be positioned based on its right co-ordinate.

I could use a container div to represent the background though it's not really practical in this situation.

I presently have the following rule:

.myelem {
  background-image: url("myelem.png");
  background-position: 5% 60%;
  background-repeat: no-repeat;
}

Which for the most part works because of the size of the image. If it were possible I'd like to have something that specified that the relative position of the background was middle instead of left.

score 17 · Accepted Answer · edited Feb 18 '19 at 07:03

17

The css propoerty background-position accepts center as a value:

.myelem {
    background-image: url("myelem.png");
    background-position: center center;
    background-repeat: no-repeat;
}

Or the shorthand version:

.myelem {
    background: url("myelem.png") center center no-repeat;
}

Update 1

There is no simple css way to set the background-position to an offset of center (or bottom or right).

You could add padding to the actual image, use javascript to calculate the position after page load, add margin to the element as suggested in the following SO questions:

Alternatively you can use calc to calculate the correct position. Although calc is not supported by all browsers at this point.

Using calc you could do something like this:

.myelem {
    background-image: url("myelem.png");
    background-position: 5% 60%;
    background-position: -webkit-calc(50% - 200px) 60%;
    background-position: calc(50% - 200px) 60%;
    background-repeat: no-repeat;
}

Demo

edited Feb 18 '19 at 07:03

Ahmad

5,551
8
41
57

answered Mar 18 '13 at 01:45

3dgoo

15,716
6
46
58

You could also combine all that into {background: url(...) center center no-repeat}. – isherwood Mar 18 '13 at 01:48
@3dgoo thanks for the update, I did specify "relative to" in the title of my question. Unfortunately as I don't have access to modify the source I can only use CSS. `calc` would be fine though I do also need to support IE 8 and above. – Brett Ryan Mar 18 '13 at 05:07
1

I've accepted your answer with using calc and fallbacks for percentage based positioning, thanks. I must note that `calc()` requires there be spaces around the operator otherwise it gets ignored (firefox and safari tested). – Brett Ryan Mar 18 '13 at 06:17
You're completely right Brett. The amount of times I've forgotten the whitespace after a minus symbol in `calc` call is so frustrating. Can't believe I did it again. – 3dgoo Mar 18 '13 at 06:31
For some reason I can't get this to work in IE9, even though it's supposed to be supported. Triple-checked whitespace around the minus sign and tried both -webkit-calc and just calc. – nphx Sep 05 '13 at 08:17
Hi @nphx. It works in my IE9 in this test I've created: http://jsfiddle.net/MrtJW/1/. Can you check that this test works for you too? If it works the image's right edge should be aligned to the centre of the red box (along the dashed centre line). If it doesn't work the image should be aligned to the left of the box. If this test does work for you, can you recreate your problem in a fiddle and share it please? – 3dgoo Sep 05 '13 at 22:23
Hey, @3dgoo! Your fiddle works just fine, but when I copy the code into my project, IE9 starts ignoring the calc again (it works in FF). I've tried marking each property as !important, but to no avail. – nphx Sep 06 '13 at 07:43
@nphx - Can you try to recreate your problem in a jsfiddle? Or share a link to your project, and we can have a look? – 3dgoo Sep 06 '13 at 09:21

Is there a way to position a background image relative to the centre of an element?

1 Answers1

Linked