CSS background animation width issue - css

Question

I have a div and the width is 100%. It has a background image. I am doing a zoom in out effect with animation for the background image. So, it will continuously loop zooming in the background image and zooming out.
div {
background-image:url('images/home-background.webp');
background-attachment:fixed;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
display:flex;
align-items: center;
justify-content: center;
width:100%;
height:700px;
animation:topb 10s infinite alternate;
box-sizing:border-box;
padding:30px;
}
#keyframes topb {
0% {
background-size: 105%;
}
100% {
background-size: 100%;
}
}
This works perfectly but when I resize my screen, particularly below 1200px, I see the background image becomes smaller even the div is 100% width. When I remove the animation line, the background image works fine, covering the screen. Here is a screenshot how it looks on mobile devices. You will see the background image does not cover the screen entirely even width is 100%.
So, can someone help me why is this happening?

Answer 1

The Problem
This is happening because your animation is overriding the Background size attribute, thus it switches from
background-size: cover;
To
background-size: 105%:
Which will make the background 105% of the width
A Solution
Since we want the background to cover the div's area at all times, and we want it to have a scaling animation, we will need to be clever. To do this we are going to nest another div with our properly sized background image inside the first. Then we add overflow: hidden to the parent and add a scale animation to the second div (not the background-size attribute though)
Some Code
body{margin:0;padding:0;background-color:#2D2D2D;}
#background {
background-image: url(https://images.unsplash.com/photo-1439405326854-014607f694d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80);
background-size: cover;
background-position:center center;
width:inherit;
height:inherit;
animation: scaleAnimation 1s infinite alternate;
position:absolute;
z-index:-1;
}
#parentDiv {
width: 100vw;
height: 500px;
overflow: hidden;
}
#parentDiv h1 {
text-align: center;
margin-top:100px;
}
#keyframes scaleAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="parentDiv">
<div id="background"></div>
<h1>Heading 1</h1>
</div>