CSS background-size property
➔ The background-size property sets the size of the background image.
Syntax
background-size: auto | length | cover | contain | initial | inherit;
Property values
| Value | Description |
|---|---|
|
auto |
Displays the image in its original size and is the default value. |
| length | Sets the width and height of the background image in length. The first value determines the width, the second value determines the height. If only one value is specified, the second is set to "auto". |
| percentage | Sets the width and height of the background image in percentage. The first value determines the width, the second value determines the height. If only one value is specified, the second is set to "auto". |
| cover | Scales the image to cover the entire container. |
| contain | Scales the image to fit inside the container, maintaining the aspect ratio. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
body {
background-image: url('resources/images/mountain.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
body {
background-image: url('resources/images/mountain.png');
background-repeat: no-repeat;
background-size: 75% 50%;
}Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-size Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
background-image: url('resources/images/mountains-m05.png');
background-size: cover;
border-radius: 5px;
}
p {
color: black;
padding: 20px 10px;
}
</style>
</head>
<body>
<div>
<h1>CSS background-size Example</h1>
<p>The CSS background-size is used to set the background-size on the element.</p>
<p> The background-size property specifies the size of the background image using auto, cover, contain or
pixels.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.