Background image not showing in Safari

I have the same issue and I have solved this issue by changing:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

to:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

and that is working good in safari now :)

Safari has an apparent bug where it won't show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online. Progressive JPEG, on the other hand, encodes the image in progressively higher detail. This means that it loads fuzzy at first and then gets clearer. Some people think this looks better online, which is why it's used. Some image optimizers will automatically make jpgs progressive for online use.

In my experience, Safari won't display jpgs when some of the following criteria are met:

• progressive encoding is used
• the image is a background (for an element or the whole page)
• the image is large (I don't know how big exactly, but I ran into problems with images that were in the thousands of pixels wide)
• possibly other things, I haven't fully explored this bug

I have not been able to recreate this in any browser except Safari.

To fix this, you can either re-save the image, making sure that it isn't in a progressive format (photoshop, etc have a selector for this), or use another format (gif, png, etc)

I had the same problem with Safari. I tried other solutions, the only thing that worked for me was to remove a negative z-index.

I got here from a google search page, so in case this issue comes up for someone else, just make sure you double check your code. Safari can be very picky about correct code, so even if it's typed correctly here in the question, just do a double check of that. If you forget the end parenthesis, it won't show, where other browsers like Chrome will assume you meant to put it and render the page correctly. Make sure all of your code is properly opened/closed:

<div style="background-image:url('../images/bg.jpg');">HEY</div>