<!DOCTYPE html>
<html>
<head>
<title>CSS background-size property</title>
<style type="text/css">
.auto {
background-size: auto;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
.length_width {
background-size: 50px;
background-repeat: no-repeat;
}
.length {
background-size: 50px 80px;
background-repeat: no-repeat;
}
.percentage_width {
background-size: 50%;
background-repeat: no-repeat;
}
.percentage {
background-size: 100% 100%;
}
div {
background-image: url("../../images/img_nat.png");
border: 1px solid #000;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<h4><code>background-size: auto;</code></h4>
<div class="auto"></div>
<h4><code>background-size: cover;</code></h4>
<div class="cover"></div>
<h4><code>background-size: contain;</code></h4>
<div class="contain"></div>
<h4><code>background-size: 50px;</code></h4>
<div class="length_width"></div>
<h4><code>background-size: 50px 80px;</code></h4>
<div class="length"></div>
<h4><code>background-size: 50%;</code></h4>
<div class="percentage_width"></div>
<h4><code>background-size: 100% 100%;</code></h4>
<div class="percentage"></div>
</body>
</html>
