background image on 3 boxes not scaling correctly fix
So i had this weird task the other day, where there was three boxes with a background image set.
When the screen changed size the image would go out of wack.
The fix?
Pixels rather than Percentage
Have a look in the demo's below to see the difference when changing the screen width.
HTML
<h2>Percentage Background</h2>
<div class="container mb-3">
<div class="row">
<div class="col-sm">
<div class="img-box img-box-1-per"></div>
</div>
<div class="col-sm">
<div class="img-box img-box-2-per"></div>
</div>
<div class="col-sm">
<div class="img-box img-box-3-per"></div>
</div>
</div>
</div>
<h2>Pixels Background</h2>
<div class="container mb-3">
<div class="row">
<div class="col-sm">
<div class="img-box img-box-1-px"></div>
</div>
<div class="col-sm">
<div class="img-box img-box-2-px"></div>
</div>
<div class="col-sm">
<div class="img-box img-box-3-px"></div>
</div>
</div>
</div>CSS
.img-box {
height:300px;
background:url(https://kruxor.com/images/ios-14-iphone.jpg) center no-repeat;
}
.img-box-1-per {
background-position-x: 20%;
}
.img-box-2-per {
background-position-x: 40%;
}
.img-box-3-per {
background-position-x: 60%;
}
.img-box-1-px {
background-position-x: -200px;
}
.img-box-2-px {
background-position-x: -400px;
}
.img-box-3-px {
background-position-x: -600px;
}