Resize PNGs with Window Resize - html

Question

Newbie here hacking away at this little project:
http://development.puretapecult.divshot.io/
And my question is, how do I automatically resize the .pngs in the center of the screen when the browser size collapses, or when it is viewed on a mobile browser?
Do I have to use #media queries for mutliple viewing sizes, and create multiple classes for each png?
Any help appreciated.
CSS classes that modify the images:
.spinner-outer {
display: block;
width: 327px;
height: 327px;
position: absolute;
left: 50%;
margin-left: -163px;
border-radius: 50%;
background: url(spinner-outer.png) center center no-repeat #32302e;
}
.spinner-center {
height: 200px;
width: 200px;
position: absolute;
background: url(spinner-center.png) center center no-repeat;
border-radius: 50%;
left: 50%;
top: 50%;
margin: -99px;
pointer-events: none;
}
.play-sprite {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
background: url(play-sprite.png) 0px 0px no-repeat;
height: 70px;
width: 70px;
}

Answer 1

I would use media queries to change the height and width of the divs. Note that you do not need to create multiple classes for different sizes. Just use multiple media queries like this:
#media (max-width: 768px) {
.spinner-outer {
width: 200px;
height: 200px;
}
}
You'll also need to specify that you want your background image to fit the size of the div or it won't change sizes when the div does. Use the CSS3 property background-size as long as you're comfortable not supporting old browsers.
.spinner-outer {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
More info on background-size and some alternative techniques if you want to support older browsers: https://css-tricks.com/perfect-full-page-background-image/.

Answer 2

Try somthing like this.
HTML:
<div class="image-wrapper">// Div will always re-size with page.
<img src="[src]" />
</div>
CSS:
.image-wrapper{
max-width:90%;
height:auto !important;
position: relative;
display:block;
margin:0 auto;
}
.image-wrapper img{
max-width:100% !important;
height:auto !important;
display:block;
}
Or you can use bootstrap and add a class to image like so.
.img-responsive
Makes an image responsive (will scale nicely to the parent element)
<img src="[src]" class="img-responsive" alt="[Alt]">