Responsive css sprite

by Vitaliy Emeliyantsev

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9 ">
      <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <div class="col-xs-3">
      <div class="photo photo_4">
        <div class="photo__item photo__item_4"></div>
      </div>
      </div>
  </div>
</div>

CSS

.photo {
  width: 100%;
}
.photo__item {
  background-repeat: no-repeat;
  padding-bottom: 100%;
  width: 100%;
}
.photo_4 {
  max-width: 112px;
}
.photo__item_4 {
  background: #fff url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
  background-position: 0 38.88%;
  background-size: 535.71% 357.14%;
}