Search code examples
htmlcsssafaribackground-image

CSS Background Image Doesn't Appear in Safari

I have the following CSS which sets the background image, but it doesn't work in Safari. It doesn't even set the background color, even though that should be a fallback. I can't install Safari on Windows so I can't even test it!

.oops-body {
    background: url('/img/oops-bg.jpg') center/cover no-repeat #1b1d37;
    min-height: 100vh;
    overflow: hidden;
}

And the HTML

<body>
<div class="oops-body">
</div>
</body>


.oops-body {
	background: url('http://placehold.it/500') center/cover no-repeat #1b1d37;
	min-height: 100vh;
	overflow: hidden;
}
<div class="oops-body">
 </div>

This was the screen shot from a co-worker who has Safari:

enter image description here

By the way, it does work in mobile Safari. I tested on my iPhone.

Solution

  • Can you try this,

    background-image: url("http://placehold.it/500");
background-repeat: no-repeat;
background-position: center top;

    instead of just using background.