How to dynamically resize CSS button sprites (background image)?

Question

Using CSS, how can I make the button images background: url(); scale down relative to the the parent div? The parent div is centered and set to scale according to viewport width vw.
Any ideas?

EDIT What's important here is scaling to the viewport width, not a parent div.

   body {
		background-color: rgb(0,0,0);
		margin: 0px; 
		border: 0px black;
		padding: 0px;
		}

	#parent {
		background-color: grey;
		width: 80vw;
		font-size: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);					
		display: flex;
		align-items:center;
		justify-content: center;				
	    }

		a{
		height: 200px;
		display: flex;				
		}		

   	        #alpha a{            	           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;      	
	    }	
    
   		#alpha a:hover {           	           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0;            
	    }            

   	        #beta a{                       
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;     	
        } 

      	#beta a:hover {           
		width: 200px;   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0;                
	    }

<div id=parent>	

    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
  
</div>	
</body>

Answer 1

You can use the background-size to set this, as your images are as tall as the buttons but twice the width, you can use ' background-size:200% 100%;'

and then to "switch" the image to the next one you can change the position to be 100%

body {
		background-color: rgb(0,0,0);
		margin: 0px; 
		border: 0px black;
		padding: 0px;
		}

	#parent {
		background-color: grey;
		width: 80vw;
		font-size: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);					
		display: flex;
		align-items:center;
		justify-content: center;				
	    }

		a{
		height: 100px;
		display: flex;				
		}		

   	        #alpha a{            	           
		width: 100px;   

		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;
            background-size:200% 100%;
 
	    }	
    
   		#alpha a:hover {           	           
		width: 100px;   
 
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0;      
       background-size:200% 100%;
	    }            

   	        #beta a{                       
		width: 100px;   
   
		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0;
      background-size: 200% 100%;

        } 

      	#beta a:hover {           
		width: 100px;

		background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; 
        background-size:200% 100%;
       
	    }

<div id=parent>	

    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
  
</div>	
</body>