Understanding values of background-size property

dabblet.css

/**
 * Understanding values of background-size property
 */
 
 section > div > div{
 	position: relative;
 	width: 170px;
 	height: 170px;
 	display: inline-block;
 	margin: 30px 10px;
  	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
 }
 section > div{
 	border: 1px solid #EEE;
 }
 section div{
 	 text-transform: capitalize;
 	 
 	 border-radius: 10px;
 	 margin: 10px 0;
 	 background: radial-gradient(0% 0%, circle, transparent, rgba(0,0,0,0.1));
 	 padding: 10px 0;
 }
 section > div:before{
 	content: attr(class);
 	position: absolute;
 	left: 20px;
 }
 section > div > div:before{ 
 	content: attr(class);
 	position: absolute;
 	padding: 10px;
 	color: white;
 }
 
 /* 50 50 */
 div.center .cover{
 	background-image: radial-gradient(center center, circle cover, orange, steelblue);
 }
 div.center .contain{ 
 	background-image: radial-gradient(center center, circle contain,  orange, steelblue);
 }
 div.center .farthest-corner{ 	
 	background-image: radial-gradient(center center, circle farthest-corner, orange, steelblue);
 }
 div.center .farthest-side{ 
 	background-image: radial-gradient(center center, circle farthest-side,  orange, steelblue);
 }
 div.center .closest-corner{ 
 	background-image: radial-gradient(center center, circle closest-corner, orange, steelblue);
 }
 div.center .closest-side{ 
 	background-image: radial-gradient(center center, circle closest-side,  orange, steelblue);
 }
 
 /* 0 0 */ 
 div.top-left .cover{
 	background-image: radial-gradient(0% 0%, circle cover, orange, steelblue);
 }
 div.top-left .contain{ 
 	background-image: radial-gradient(0% 0%, circle contain,  orange, steelblue);
 }
 div.top-left .farthest-corner{ 	
 	background-image: radial-gradient(0% 0%, circle farthest-corner, orange, steelblue);
 }
 div.top-left .farthest-side{ 
 	background-image: radial-gradient(0% 0%, circle farthest-side,  orange, steelblue);
 }
 div.top-left .closest-corner{ 
 	background-image: radial-gradient(0% 0%, circle closest-corner, orange, steelblue);
 }
 div.top-left .closest-side{ 
 	background-image: radial-gradient(0% 0%, circle closest-side,  orange, steelblue);
 }
 
 /* 100 100 */  
 div.bottom-right .cover{
 	background-image: radial-gradient(100% 100%, circle cover, orange, steelblue);
 }
 div.bottom-right .contain{ 
 	background-image: radial-gradient(100% 100%, circle contain,  orange, steelblue);
 }
 div.bottom-right .farthest-corner{ 	
 	background-image: radial-gradient(100% 100%, circle farthest-corner, orange, steelblue);
 }
 div.bottom-right .farthest-side{ 
 	background-image: radial-gradient(100% 100%, circle farthest-side,  orange, steelblue);
 }
 div.bottom-right .closest-corner{ 
 	background-image: radial-gradient(100% 100%, circle closest-corner, orange, steelblue);
 }
 div.bottom-right .closest-side{ 
 	background-image: radial-gradient(100% 100%, circle closest-side,  orange, steelblue);
 }
 
 /* 50 0 */   
 div.top-middle .cover{
 	background-image: radial-gradient(50% 0%, circle cover, orange, steelblue);
 }
 div.top-middle .contain{ 
 	background-image: radial-gradient(50% 0%, circle contain,  orange, steelblue);
 }
 div.top-middle .farthest-corner{ 	
 	background-image: radial-gradient(50% 0%, circle farthest-corner, orange, steelblue);
 }
 div.top-middle .farthest-side{ 
 	background-image: radial-gradient(50% 0%, circle farthest-side, orange, steelblue);
 }
 div.top-middle .closest-corner{ 
 	background-image: radial-gradient(50% 0%, circle closest-corner, orange, steelblue);
 }
 div.top-middle .closest-side{ 
 	background-image: radial-gradient(50% 0%, circle closest-side, orange, steelblue);
 }
 
 /* 50 100 */    
 div.bottom-middle .cover{
 	background-image: radial-gradient(50% 100%, circle cover, orange, steelblue);
 }
 div.bottom-middle .contain{ 
 	background-image: radial-gradient(50% 100%, circle contain,  orange, steelblue);
 }
 div.bottom-middle .farthest-corner{ 	
 	background-image: radial-gradient(50% 100%, circle farthest-corner, orange, steelblue);
 }
 div.bottom-middle .farthest-side{ 
 	background-image: radial-gradient(50% 100%, circle farthest-side, orange, steelblue);
 }
 div.bottom-middle .closest-corner{ 
 	background-image: radial-gradient(50% 100%, circle closest-corner, orange, steelblue);
 }
 div.bottom-middle .closest-side{ 
 	background-image: radial-gradient(50% 100%, circle closest-side, orange, steelblue);
 }
 
 /* 0 50 */    
 div.left-middle .cover{
 	background-image: radial-gradient(0% 50%, circle cover, orange, steelblue);
 }
 div.left-middle .contain{ 
 	background-image: radial-gradient(0% 50%, circle contain,  orange, steelblue);
 }
 div.left-middle .farthest-corner{ 	
 	background-image: radial-gradient(0% 50%, circle farthest-corner, orange, steelblue);
 }
 div.left-middle .farthest-side{ 
 	background-image: radial-gradient(0% 50%, circle farthest-side, orange, steelblue);
 }
 div.left-middle .closest-corner{ 
 	background-image: radial-gradient(0% 50%, circle closest-corner, orange, steelblue);
 }
 div.left-middle .closest-side{ 
 	background-image: radial-gradient(0% 50%, circle closest-side, orange, steelblue);
 }
 
 /* 100 50 */     
 div.right-middle .cover{
 	background-image: radial-gradient(100% 50%, circle cover, orange, steelblue);
 }
 div.right-middle .contain{ 
 	background-image: radial-gradient(100% 50%, circle contain,  orange, steelblue);
 }
 div.right-middle .farthest-corner{ 	
 	background-image: radial-gradient(100% 50%, circle farthest-corner, orange, steelblue);
 }
 div.right-middle .farthest-side{ 
 	background-image: radial-gradient(100% 50%, circle farthest-side, orange, steelblue);
 }
 div.right-middle .closest-corner{ 
 	background-image: radial-gradient(100% 50%, circle closest-corner, orange, steelblue);
 }
 div.right-middle .closest-side{ 
 	background-image: radial-gradient(100% 50%, circle closest-side, orange, steelblue);
 }
 

dabblet.html

<section>
	<div class='center'>
		<div class='cover'></div>
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='top-left'>
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='bottom-right'>
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='top-middle'>		
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='bottom-middle'>	
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='left-middle'>	
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
	<div class='right-middle'>
		<div class='cover'></div>		
		<div class='contain'></div>
		<div class='farthest-corner'></div>
		<div class='farthest-side'></div>
		<div class='closest-corner'></div>		
		<div class='closest-side'></div>
	</div>
</section>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}