CODEWITHSUNDEEP
csssafari
JeremyE
JeremyE

Reputation: 1418

Background Image not Loading in Safari

Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.

http://lapalomafunrun.com/

Here is the code I'm using:

#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}

Upvotes: 1

Views: 3474

Answers (2)

Jesse
Jesse

Reputation: 161

I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.

Upvotes: 0

user2997761
user2997761

Reputation:

The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:

#navbar {
    width: 100%;
    height: 53px;
    margin-top: -10px;
    position:relative;
    z-index:1;
    background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
    background-size: 100% 63px;
}

Upvotes: 1

Related Questions