Search code examples
htmlcssformattingbackground-image

GIF not fullscreen safari

I am displaying a gif in the background of my react app & need it to take up the entire screen, regardless of screen size, browser, etc. It's working perfectly on chrome, but not on safari (cuts off mid-screen). This is a pretty big formatting problem as this version is currently in production. How can I get the gif to format properly?

CSS:

.myGradientBackground {
   background-image: url('my_gif.gif');
   background-size:100%;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height:100%;
   width:100%;
}
Solution

  • I think this will work

    .myGradientBackground {
    background: url('my_gif.gif') no-repeat center center fixed; 
    background-size: cover;
}