CSS - background image error only in Safari

Question

I have a button that works in every browser but Safari. Here is the CSS code:

div#home-buttons #rv {
    background: url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top / 165px 115px #273e78;
}

The Safari Error console says: "Resource interpreted as Image but transferred with MIME type text/plain."

Any ideas on how to approach this?

Thanks!

Solution

The problem is that Safari does not understand or support background-size inside the shorthand background. I don't know why, but I figured it out once.

So I would put it in this way, wich will work:

background: #273e78 url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top;
background-size: 165px 115px

How I said, I had this issue once and solved it so. Hope it works for you also.

Quotes are not the problem. W3C says you can use quotes or not, simple or double. It's up to you. More info about this here: http://www.w3.org/TR/CSS2/syndata.html#value-def-uri

Comments

[jeffusu]

Thanks for the response. I tried the changes you suggested but it's still not showing up.

[Omar Abdirahman]

It looks like Safari can't find the image given in the URL. Do you have the latest version of Safari? Also check this out

[Omar Abdirahman]

stackoverflow.com/questions/658238/…

[Ricardo Parker]

This is not necessarily a great solution. For example, I have a blog page that gets very long. That page uses a particular background that other pages don't. "background-size:cover" makes the background fixed on all browsers (even Android), but not Safari. On Safari the background is fixed with the content and it scrolls with the content, and so it stretches to the length (height) of the long page.

[Ricardo Parker]

Using your tip I'd have to write something ridiculous such as "height: 5000 px" or else if I use the dimension of the iPad, which is 768 pixels, then what I get is mostly a white background with the image showing with 768 pixels of height only in the very middle of the page. This is not the desired effect. I'm looking to have Safari keep the background fixed as other browsers do. That way the content moves freely and I can control the background without the no-repeat option. Thank you.

[Ricardo Parker]

css-tricks.com/forums/topic/…