Background image zooms when going into fullscreen

toelit 0
Viewed 23

I'm trying to insert a gif as the background image but when I make the page fullscreen it zooms in making the background image appear a lot bigger. Is it possible to make the gif stay a certain size when changing the resolution of the page?

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("space.gif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
css html
1 Answers

You could change the background cover property to contain value or other specific size.

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://flevix.com/wp-content/uploads/2019/07/Clock-Loading.gif");
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    background-repeat:no-repeat
}
<div class="bg"></div>

Marta González0
Related