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
Related Search Terms
Page Views

This page has been viewed 84 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
Be Yourself, Back Yourself
Kristie Bennett, Survivor