11

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!

Vlad
  • 217
  • 1
  • 4
  • 14

5 Answers5

34

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.

leymannx
  • 5,138
  • 5
  • 45
  • 48
  • 2
    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 ... – Vlad Nov 27 '13 at 11:28
  • @Vlad - 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. – leymannx Nov 27 '13 at 13:38
  • 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 – Vlad Nov 28 '13 at 14:21
  • 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! – Vlad Nov 28 '13 at 15:06
  • @Vlad - 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... – leymannx Nov 28 '13 at 15:18
  • 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 ... – Vlad Nov 28 '13 at 18:52
  • @Vlad - 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? – leymannx Mar 07 '14 at 11:19
3

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.

Ansikt
  • 1,442
  • 11
  • 13
  • it works in safari, but setting padding (for example from top) just to set background position is not always what you want .. – Vlad Nov 27 '13 at 11:20
  • 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. – Luke Oct 09 '14 at 06:14
  • 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. – Luke Oct 09 '14 at 06:16
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.

Mr Br
  • 3,831
  • 1
  • 20
  • 24
  • 2
    useless for the right positioning when you don't know width / height of the element. – Vlad Nov 27 '13 at 11:05
-1

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

SoBiT
  • 408
  • 5
  • 18
-4

Best way is to use:

background-size: auto;
Holt
  • 36,600
  • 7
  • 92
  • 139
krithika
  • 1