Is background-size supported?
with prefix
by David Storey
HTML
<div id="length">125px (half width of element)</div>
<div id="percentage">50%</div>
<div id="auto">auto (original size of image)</div>
<div id="cover">cover (full height)</div>
<div id="contain">contain (full width)</div>
CSS
div {
width: 250px;
height: 250px;
border: 1px solid green;
margin: .5em;
background-image: url("https://dl.dropboxusercontent.com/u/444684/openwebref/images/placeholder.png");
background-repeat: no-repeat;
}
#length {
-webkit-background-size: 125px;
-moz-background-size: 125px;
-o-background-size: 125px;
background-size: 125px;
}
#percentage {
-webkit-background-size: 50%;
-moz-background-size: 50%;
-o-background-size: 50%;
background-size: 50%;
}
#auto {
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
#cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}
#contain {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 300px;
}