How can I scale sprite sheet images to a container?

Question

I have a container with a background image that scales to the width of a screen, up to a maximum size of 1400px. I want to take icons from a sprite sheet and scale them proportionally to how the container is scaling.

The size of the icons, as well as the placement of the icons within the container are important. At the maximum size of 1400px, everything is great. But when scaling down, I want the icons to also scale down in size and keep the correct positioning relative to the background image of the container.

Right now, the icons do not scale down with the container: https://jsfiddle.net/KakeWalk/2hduxzLe/

HTML:

<div class="container-fluid striped-background">
  <div id="blue-section">
    <div id="AAAA"></div>
    <div id="BBBB"></div>
    <div id="CCCC"></div>
    <div id="DDDD"></div>
    <div id="EEEE"></div>
    <div id="FFFF"></div>
    <div id="GGGG"></div>
    <div id="HHHH"></div>
    <div id="IIII"></div>
    <div id="JJJJ"></div>
    <div id="KKKK"></div>
    <div id="LLLL"></div>
    <div id="MMMM"></div>
    <div id="NNNN"></div>
    <div id="OOOO"></div>
    <div id="PPPP"></div>
    <div id="QQQQ"></div>
    <div id="RRRR"></div>
    <div id="SSSS"></div>
  </div>
</div>

CSS:

.striped-background {
  background-image: url("https://imgur.com/7sSDRKV.png");
  background-repeat: no-repeat;
  max-width: 1400px;
  height: 520px;
  background-size: 100%;
  position: relative;
}

#blue-section div {
  height: 92px;
  width: 92px;
  margin: 0;
  padding: 0;
  position: absolute;
  cursor: pointer;
  display: block;
}

#AAAA {
  left: 4.5%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 0.476190%;
}

#BBBB {
  left: 15.05%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 0.476190%;
}

#CCCC {
  left: 36.16%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 0.476190%;
}

#DDDD {
  left: 46.72%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 0.476190%;
}

#EEEE {
  left: 9.77%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 0.476190%;
}

#FFFF {
  left: 20.33%;
  top: 50%;
  background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 22.8571%;
}

#GGGG {
  left: 20.33%;
  top: 80%;
  background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 22.8571%;
}

#HHHH {
  left: 30.88%;
  top: 40%;
  background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 22.8571%;
}

#IIII {
  left: 30.88%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 22.8571%;
}

#JJJJ {
  left: 41.44%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 22.8571%;
}

#KKKK {
  left: 57.27%;
  top: 30%;
  background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 45.2381%;
}

#LLLL {
  left: 57.27%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 45.2381%;
}

#MMMM {
  left: 78.38%;
  top: 40%;
  background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 45.2381%;
}

#NNNN {
  left: 67.83%;
  top: 40%;
  background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 45.2381%;
}

#OOOO {
  left: 73.11%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 45.2381%;
}

#PPPP {
  left: 83.66%;
  top: 15%;
  background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 67.6190%;
}

#QQQQ {
  left: 88.94%;
  top: 40%;
  background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 67.6190%;
}

#RRRR {
  left: 83.66%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 67.6190%;
}

#SSSS {
  left: 73.11%;
  top: 65%;
  background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 67.6190%;
}

To get the background-position percentages, I used a Responsive CSS Sprite Generator that gave me this CSS:

/*
Responsive CSS Sprite created using: https://responsive-css.us/
*/

.AAAA, .BBBB, .CCCC, .DDDD, .EEEE, .FFFF, .GGGG, .HHHH, .IIII, .JJJJ, .KKKK, .LLLL, .MMMM, .NNNN, .OOOO, .PPPP, .QQQQ, .RRRR, .SSSS 
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
background-image:url(sprite.png);}

.AAAA {width: 92px; height: 92px; background-position: 0.476190% 0.476190%; background-size: 556.522%; }
.BBBB {width: 92px; height: 92px; background-position: 22.8571% 0.476190%; background-size: 556.522%; }
.CCCC {width: 92px; height: 92px; background-position: 45.2381% 0.476190%; background-size: 556.522%; }
.DDDD {width: 92px; height: 92px; background-position: 67.6190% 0.476190%; background-size: 556.522%; }
.EEEE {width: 92px; height: 92px; background-position: 90.0000% 0.476190%; background-size: 556.522%; }
.FFFF {width: 92px; height: 92px; background-position: 0.476190% 22.8571%; background-size: 556.522%; }
.GGGG {width: 92px; height: 92px; background-position: 22.8571% 22.8571%; background-size: 556.522%; }
.HHHH {width: 92px; height: 92px; background-position: 45.2381% 22.8571%; background-size: 556.522%; }
.IIII {width: 92px; height: 92px; background-position: 67.6190% 22.8571%; background-size: 556.522%; }
.JJJJ {width: 92px; height: 92px; background-position: 90.0000% 22.8571%; background-size: 556.522%; }
.KKKK {width: 92px; height: 92px; background-position: 0.476190% 45.2381%; background-size: 556.522%; }
.LLLL {width: 92px; height: 92px; background-position: 22.8571% 45.2381%; background-size: 556.522%; }
.MMMM {width: 92px; height: 92px; background-position: 45.2381% 45.2381%; background-size: 556.522%; }
.NNNN {width: 92px; height: 92px; background-position: 67.6190% 45.2381%; background-size: 556.522%; }
.OOOO {width: 92px; height: 92px; background-position: 90.0000% 45.2381%; background-size: 556.522%; }
.PPPP {width: 92px; height: 92px; background-position: 0.476190% 67.6190%; background-size: 556.522%; }
.QQQQ {width: 92px; height: 92px; background-position: 22.8571% 67.6190%; background-size: 556.522%; }
.RRRR {width: 92px; height: 92px; background-position: 45.2381% 67.6190%; background-size: 556.522%; }
.SSSS {width: 92px; height: 92px; background-position: 67.6190% 67.6190%; background-size: 556.522%; }

I tried copy/pasting this code into my project and changing the classes to IDs and the other way around, but had no success. None of the many things I've tried have gotten me any closer to the goal than what I posted here: https://jsfiddle.net/KakeWalk/2hduxzLe/

Answer 1

You were almost there, just need to specify some values in % .
Run the snippet below in fullscreen and resize:

 .striped-background { position: relative; max-width: 1400px; padding: 37.143% 0 0; /* 520px is 37.143% from 1400px so we keep the aspect ratio */ background: url("https://imgur.com/7sSDRKV.png") no-repeat 0 0 / cover; } #blue-section div { position: absolute; width: 6.6%; /* 92px is 6.6% from 1400px */ padding: 6.6% 0 0; cursor: pointer; background-image: url("https://imgur.com/8L1Y4SS.png"); background-size: 556.522%; /* the width of your sprite is 512px where 460px for 5 symbols (92px each) and the rest of the space is for unnecessary extra space. So if there was no extra space, background-size would be 500% (100% for 5 symbols) but we have to multiply this number to 512/460 what gives us 556.522% */ } #AAAA { left: 4.5%; top: 15%; background-position: 0.476190% 0.476190%; } #BBBB { left: 15.05%; top: 15%; background-position: 22.8571% 0.476190%; } #CCCC { left: 36.16%; top: 15%; background-position: 45.2381% 0.476190%; } #DDDD { left: 46.72%; top: 15%; background-position: 67.6190% 0.476190%; } #EEEE { left: 9.77%; top: 65%; background-position: 90.0000% 0.476190%; } #FFFF { left: 20.33%; top: 50%; background-position: 0.476190% 22.8571%; } #GGGG { left: 20.33%; top: 80%; background-position: 22.8571% 22.8571%; } #HHHH { left: 30.88%; top: 40%; background-position: 45.2381% 22.8571%; } #IIII { left: 30.88%; top: 65%; background-position: 67.6190% 22.8571%; } #JJJJ { left: 41.44%; top: 65%; background-position: 90.0000% 22.8571%; } #KKKK { left: 57.27%; top: 30%; background-position: 0.476190% 45.2381%; } #LLLL { left: 57.27%; top: 65%; background-position: 22.8571% 45.2381%; } #MMMM { left: 78.38%; top: 40%; background-position: 45.2381% 45.2381%; } #NNNN { left: 67.83%; top: 40%; background-position: 67.6190% 45.2381%; } #OOOO { left: 73.11%; top: 15%; background-position: 90.0000% 45.2381%; } #PPPP { left: 83.66%; top: 15%; background-position: 0.476190% 67.6190%; } #QQQQ { left: 88.94%; top: 40%; background-position: 22.8571% 67.6190%; } #RRRR { left: 83.66%; top: 65%; background-position: 45.2381% 67.6190%; } #SSSS { left: 73.11%; top: 65%; background-position: 67.6190% 67.6190%; } 

 <div class="container-fluid striped-background"> <div id="blue-section"> <div id="AAAA"></div> <div id="BBBB"></div> <div id="CCCC"></div> <div id="DDDD"></div> <div id="EEEE"></div> <div id="FFFF"></div> <div id="GGGG"></div> <div id="HHHH"></div> <div id="IIII"></div> <div id="JJJJ"></div> <div id="KKKK"></div> <div id="LLLL"></div> <div id="MMMM"></div> <div id="NNNN"></div> <div id="OOOO"></div> <div id="PPPP"></div> <div id="QQQQ"></div> <div id="RRRR"></div> <div id="SSSS"></div> </div> </div> 

Hope it helps.