Search code examples
htmlcssgoogle-chromesafaribackground-image

background-size: cover breaks in Safari but not Chrome

I have a temporary app here.

https://equator1248.herokuapp.com

I have verified that in Chrome everything works fine but in Safari my background image does not show up.

Relevant code appears straight forward:

<html>
  <head>
    <link rel="apple-touch-icon" href="_images/favicon.png">
    <script type="text/javascript" src="arc.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
    <style>
      body{
        background-image: url('_images/background.png');
        background-size: cover;
      }
    </style>
  </body>
</html>

Seems like a straightforward property according to:

https://css-tricks.com/almanac/properties/b/background-size/

I can get Safari to work if I remove the line:

background-size: cover;

but then I do not get the desired effect of cover.

I just verified that

background-size: contain;

breaks it as well.

A single value like 400px breaks it as well. It seems to not like any value you give the property.

Solution

  • I think this has nothing to do with background-size:cover which is totally supported on Safari, and more to do with the fact that your web server is sending out the images with the wrong content-type. All images show up as txt in my console, while this doesn't happen on other websites.

    Console Screenshot

    Source: I (probably) have the same setup as you. Macbook Air, Safari, macOS High Sierra 10.13.6.