CODEWITHSUNDEEP
htmlcssformattingbackground-image
Ryan Cocuzzo
Ryan Cocuzzo

Reputation: 3219

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%;
}

Upvotes: 1

Views: 281

Answers (1)

Pratik
Pratik

Reputation: 167

I think this will work

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

Upvotes: 1

Related Questions