CSS Background Image Not Appearing in Safari

Background image not showing in Safari

I converted the image format from jpeg to gif and it worked. So the final CSS is :

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

CSS Background Image Doesn't Appear in Safari

Can you try this,

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

instead of just using background.

CSS background-image don't work on Safari browser

I've had a similar problem and converting my image from png to gif helped. There are a few known bugs with Safari and background images.

This link to a similar problem might have some other solutions if mine doesn't work.

Background image not showing on Safari

I just solved my problem by making the following tweak at the CSS class.

.thGridColumnHeader
{
    background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-moz-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,-o-linear-gradient(top,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.12) 0,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 51%,rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
    background-color: #1d1d1d;
    background-image: url('../Images/Textures/glass.png');
}

I had transferred the code below to the last portion of the CSS class and it worked.

    background-image: url('../Images/Textures/glass.png');

Here is the output now on safari:

CSS background-image relative path var() on Safari not loading image

This appears to be a Safari bug - seen also in IOS Safari (14.4).

The only workaround I can find is to have the background-image statement

background-image: var(--lb3-widget-icon);

in a style element in the main code file (with positioning of the png in the right relative place for that) - the var can still be set in the css file.

This is obviously not ideal, but does mean you can still use a CSS variable with relative folder path to select an image, though means the image folder has to move.

---

Related Topics