We would like to know how to test if background-size Is supported.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from www .ja va2s.co m-->
width: 250px;
height: 250px;
border: 1px solid green;
margin: .5em;
background-image:url("http://placehold.it/200x200");
background-repeat: no-repeat;
}
#length {
background-size: 125px;
}
#percentage {
background-size: 50%;
}
#auto {
background-size: auto;
}
#cover {
background-size: cover;
height: 300px;
}
#contain {
background-size: contain;
height: 300px;
}
</style>
</head>
<body>
<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>
</body>
</html>
The code above is rendered as follows: