The background-size property in CSS is used to set the size of the background image. The image may be positioned left from its natural size, stretched, or constrained to fit in the available space.
Syntax:
background-size: auto|length|cover|contain|initial|inherit;
The background-size property can be specified with one of the following syntaxes:
- Using the keyword value as ‘auto‘, ‘cover‘, and ‘contain‘.
- Using single-value syntax i.e. setting the width property where height property is set to default value as auto.
- Using double-value syntax having both width and height property, where the first value sets the width of the image and the second value is set the height of the image. Each value can either be in percentage, pixels, or auto.
- For specifying the size of the multiple background images then use the comma to separate each value.
Default Value : Its default value is auto.
Property Values: All the properties are described well with the example below.
auto: It is used to set the background-size property to its default value. It is used to display the background-image to its original size.
Syntax:
background-size: auto;
Example: This example illustrates the use of the background-size property whose value is set to auto.
<!DOCTYPE html><html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: auto;</h2>
</body>
</html>
|
Output:
length: It is used to set the width and height of the background-image. The first value indicates the width, and the second value indicates the height of the background image in terms of px, pt, em, etc. If any value is not given then it is set to auto.
Syntax:
background-size: length;
Example: This example illustrates the use of the background-size property whose value is set to a specific length value.
<!DOCTYPE html><html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
background-size: 400px 450px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: length;</h2>
</body>
</html>
|
Output:
percentage: It is used to set the width and height in terms of percentage as related to the parent element. The first value indicates the width, and the second value indicates the height of the background image. If any value is not given it is set to auto.
Syntax:
background-size: percentage;
Example: This example illustrates the use of the background-size property whose value is specified in percentage.
<!DOCTYPE html><html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
background-size: 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: percentage (%);</h2>
</body>
</html>
|
Output:
cover: It is used to resize the background image to cover a whole container element.
Syntax:
background-size: cover;
Example: This example illustrates the use of the background-size property whose value is set to cover.
<!DOCTYPE html><html>
<head>
<title> background-size Property </title>
<style>
body {
background-image: url(
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: cover;</h2>
</body>
</html>
|
Output:
- initial: It is used to set an element’s CSS property to its default value.
- inherit: It is used to inherit a property to an element from its parent element property value.
Supported Browsers: The browsers supported by the background-size property are listed below :
- Google Chrome 3 and above
- Internet Explorer 9.0 and above
- Microsoft Edge 12.0 and above
- Firefox 4.0 and above
- Opera 10 and above
- Safari 5 and above