The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties.
Syntax:
background-size: auto|length|cover|contain|initial|inherit;
- cover: This property value is used to stretch the background-image in x and y directions and cover the whole area.
- length: This property value is used to scale the background-image. It changes the background-image size. The length value can be in the form of px, em, % etc.
Example 1: This example stretches the background-image in x and y direction.
html
<!DOCTYPE html> < html >
< head >
< style >
/*background-size: 100% auto with no repeat */
#example1 {
width:600px; /* screen width */
height:200px; /* screen height */
border: 2px solid black;
background: url(
background-repeat: no-repeat;
background-size: 100% auto;
}
/*background-size:auto with no repeat*/
#example2 {
width:600px; /* screen width */
height:200px; /* screen height */
border: 2px solid black;
background: url(
background-repeat: no-repeat;
background-size: auto;
}
/* background-size: cover with no repeat */
#example3 {
border: 2px solid black;
width:600px; /* screen width */
height:200px; /* screen height */
background: url(
background-repeat: no-repeat;
background-size: cover;
}
</ style >
</ head >
< body >
< h2 >background-size: 100% auto :</ h2 >
< p >
The background image is displayed
in its original size.
</ p >
< div id="example1"></ div >
< h2 >background-size: auto (default):</ h2 >
< p >The background image is set to auto.</ p >
< div id="example2"></ div >
< h2 >background-size: cover:</ h2 >
< p >
The background image is set to cover
to specified area.
</ p >
< div id="example3"></ div >
</ body >
</ html >
|
Output:
Example 2: This example scales the background-image.
html
<!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 >
|
Output: