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;