<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
/*background-size: initial with no repeat */
#example1 {
width:600px;/* screen width */
height:200px;/* screen height */
border: 2px solid black;
background: url(
background-repeat: no-repeat;
background-size: initial;
}
/*background-size: contain with repeat */
#example2 {
border: 2px solid black;
width:600px;/* screen width */
height:200px;/* screen height */
background: url(
background-size: contain;
}
/*background-size: 300px 100px with no repeat */
#example3 {
border: 2px solid black;
width:600px;/* screen width */
height:200px;/* screen height */
background: url(
background-repeat: no-repeat;
background-size: 300px 100px;
}
</
style
>
</
head
>
<
body
>
<
h2
>background-size: initial:</
h2
>
<
p
>The background image is set to initial.</
p
>
<
div
id="example1"></
div
>
<
h2
>background-size: contain:</
h2
>
<
p
>The background image is set to contain.</
p
>
<
div
id="example2"></
div
>
<
h2
>background-size: 300px 100px:</
h2
>
<
p
>The background image is set in pixel size.</
p
>
<
div
id="example3"></
div
>
</
body
>
</
html
>