Search code examples
htmlcsssafari

Absolute positioned image missing on Safari

My site www.primaryself.com has a hero image at the top of the page which displays in chrome/edge/firefox, but does not display in in Safari.

I have narrowed it down to the css property position:absolute on the img tag, but not sure how to correct it.

I have tried removing the position:absolute style for the img tag, which displays the image, but it is not in the right position.

Here is the CSS

.BackgroundImage {
   position: absolute;        /* <-- removing this displays the image*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Solution

  • You could add display:block; to the picture element 'BackgroundImage-Container'.