Test Page

This is a test page for the article Multiple Backgrounds and CSS Gradients.

Base Demo

background: url(/img/acceldom.jpg) 10px 10px no-repeat;

Only one background-size value

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background-size: 50%; 
-o-background-size: 50%;
-webkit-background-size: 50%; 
-moz-background-size: 50%;

Background-size: contain

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background-size: contain; 
-o-background-size: contain;
-webkit-background-size: contain; 
-moz-background-size: contain;

Background-size: cover

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background-size: cover; 
-o-background-size: cover;
-webkit-background-size: cover; 
-moz-background-size: cover;

Gradients

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background: 
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
	-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

Gradients with background-size

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background: 
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
	-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

background-size: 50px 50px, 50px 50px, 50px 50px; 
-o-background-size: 50px 50px, 50px 50px, 50px 50px;
-webkit-background-size: 50px 50px, 50px 50px, 50px 50px; 
-moz-background-size: 50px 50px, 50px 50px, 50px 50px;