Dynamically resizing sprite images with CSS - html

Question

I'm trying to make the image on the left of the following page resize like the images on the right when the browser window is made smaller/bigger:
http://www.hugoproject.com/test.html
I am using a sprite for the image on the left. My code is as follows:
HTML
<div id="home-projects">
<div id="projects">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
CSS
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 283px;
height: 213px;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
}
.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
background-position: 0 -214px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.HS:hover span {
opacity: 1;
}
What am I doing wrong?

Answer 1

This resizes it like you want (in Firefox at least, haven't tested elsewhere). Mainly have to use %'s, not fixed size in order to scale.
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 75%;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px -100%;
opacity: 0;
width: 100%;
height: 100%;
background-size: 800%;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
Another, possibly better, option would be to actually crop your PNG into separate images rather than selecting the position so that you can use the same CSS as with your other images.