CSS3 background-position issue with Safari only

Question

The following code renders well in IE9, FireFox, Chrome, but not in Safari:

.search-choice
{
  position: relative;
  background-clip : padding-box;
  background-image: url('../Design/icon_chosen_close.gif');
  background-repeat: no-repeat;
  background-position: top 6px right 6px;
}

<ul class="chzn-choices">
    <li class="search-choice" id="selLVB_chzn_c_0">
        <span>multi1</span><a href=# class="search-choice-close" rel="0"></a>
    </li>
</ul>

Safari doesn't seem to take into account the background-position. I have tried a number of variants (like background-position-x: right 6px), but nothing seems to work. I just can't offset the background image in Safari starting from the top right corner.

Any ideas? Thanks a lot for your time!

Pontius

I guess this top 6px right 6px is not a valid value – Cyprus

So what should be the valid value? It works perfect in all other browsers .. – Pontius

Just try this for example background-position: 6px 6px; and see if it works – Cyprus

Sorry, but the origin for your answer is the top LEFT corner and not the top right corner :) thanks anyway – Pontius

Answer 1

Found out that Safari marks the following line as invalid and the background image won't be displayed:

background-position: top 15px right 0px;

But when I type only:

background-position: top right;

Safari generates the following by itself:

background-position-x: 100%;
background-position-y: 0%;

Found then out that Firefox completely ignores:

background-position-x: 100%;
background-position-y: 0%;

So finally I did it with:

background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;

Whilst Safari ignores the second line, Firefox ignores the last two lines.

This tweak seems to work in older Internet Explorers, too. Tested in IE8.

Putnem

I don't see how this solves the issue to position the background let's say 5px from the right, in case you don't know the element width ... – Pontius

@Pontius - Safari only works with background-position-x and background-position-y, width doesn't matter here. You have to try a few values out for background-position-x/y until it's in the right place. And don't forget to provide the background-position like in your question as well. – Putnem

In my case, I have a fluid layout, so I will never know the width of the element. It may be 50 or 500 pixels. In that case telling safari to put the bg at 95% from the left (and expecting that this will be 5px from the right) will have quite an unpredictable result .. Anyway I don't think that this can be resolved on Win Safari version (5.1.7), which is no more supported by Apple (no future updates). Newer versions on Mac now support CSS3 so you can use CALC – Pontius

sure, but from left and when you don't know the element's width, how to place it 5px from the right? that was my initial question. thanks anyway for your time! – Pontius

@Pontius - Ah, now I understand your problem! I'm sorry I misunderstood! As consolation there's at least one good message: Safari 7 finally seems to work well with background-position: top 6px right 6px;. I just tried it out a minute ago... – Putnem

Apple is happy to no more update Safari on windows, so win users are stuck with 5.1.7 forever :) Now you get safari code that works on Mac but no more on Windows ... – Pontius

@Pontius - What if you put another fixed-width-div inside your fluid element and let it float right? And then place the background image inside the fixed-width-div? Since this div is floated to the right border, your background now inside the fixed-width-div can be placed as you define. Couldn't that maybe work? – Putnem

Answer 2

There is a bug open in Safari's implementation around the long-hand syntax of background-position: https://bugs.webkit.org/show_bug.cgi?id=37514

My fix for this was to use background-position: top right; in combination with right padding and background-origin: content-box;

It may also be useful in some scenarios to use a pseudo element instead of a background image, and just position that as you would the background.

Navarrete

it works in safari, but setting padding (for example from top) just to set background position is not always what you want .. – Pontius

Setting padding may not be what you want, but as far as I can see, this is the closest anyone has come to answering your question, and it does actually fulfill your requirements as set out in your original post. I think this should be marked as the correct answer. – Rebound

It is worth noting that one should use -webkit-background-origin: content;, -moz-background-origin: content; and background-origin: content-box;, and I had to use !important on all of the above to get it to work for me, but all the same, a great solution. – Rebound

Answer 3

If you can set right position from right and top only, you can still do it old school.

background:url("../images/") no-repeat Xpx Ypx;

Where X marks width from left, and Y height from top.

Demb

useless for the right positioning when you don't know width / height of the element. – Pontius

Answer 4

I had a similar issue when giving an <a>-tag a background-image. To give it display: inline-block; solved the problem for me.

Lohman

Answer 5

Best way is to use:

background-size: auto;

Homeric