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

Percentage Background

Pixels Background

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 481 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
The mind must be given relaxation; it will arise better and keener after resting. As rich fields must not be forced-for their productiveness, the have no rest, will quickly exhaust them constantlabor will break the vigor of the mind, but if it is released and relaxed a little while, it will recover its powers
Seneca