Width of gradient increases on zoom out? - html

Question

I have created a div that uses a linear gradient. When I zoom out (and or zoom in) my gradient shrinks and grows depending on how much I zoom out or in, I set a specific width to try to stop this. It didn't work.
body{
background: linear-gradient(200deg,#aebcbf -10%,#6e7774 110%,#0a0809 1000%);
background-repeat:no-repeat
}
img {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration:1s;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-play-state: playing;
float: left;
opacity:0.5;
border-radius:90%;
}
h1{
font-size:20px;
font-family: monospace;
font-variant-caps:titling-caps;
text-align:center;
text-decoration-style: wavy;
text-shadow: 2px 2px #FFFFFF;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#css-gradient {
background: linear-gradient(blue, white);
width:47%;
border-style:outset;
background-repeat:no-repeat
}
<div id="css-gradient">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<div style="clear: left;"></div>
<input type=color style="width:15px;height:100px;position:absolute;left:635px;top:8px;height:125px">
<h1 title="If successful this will be in a white box">Hover over me!</h1>
<hr style="width:300px;position:relative;top:-5px;border-style:double">
</div>
Here's a JSFiddle (https://jsfiddle.net/ffksjqp2/1/)

Answer 1

Im not sur I understood your problem. Do you mean a zoom in / zoom out with your browser ?
Anyway you can try this with your css-gradient class :
#css-gradient {
background: linear-gradient(blue, white);
background-attachment: fixed;
width:47%;
border-style:outset;
background-repeat:no-repeat
}