CODEWITHSUNDEEP
csssafaribackground-image
jeffusu
jeffusu

Reputation: 135

CSS - background image error only in Safari

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!

Upvotes: 3

Views: 16636

Answers (2)

pzin
pzin

Reputation: 4248

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

Upvotes: 11

Omar Abdirahman
Omar Abdirahman

Reputation: 731

There is no need to double quote the path to image. Like this approach:

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

Some browsers don't get the path with a forward slash at the beginning. Try to start with ../portals/248820/images/layout/home-rv.jpg

Good luck with that.

Upvotes: 0

Related Questions