The background-size property is used to set the background image size using CSS. Use height and width property to set the size of the background image.
Syntax:
background-size: width height;
Note:
- If the first value is omitted then the image takes its original width.
- If the second value is omitted then the image takes its original height.
Example 1: This example sets the background-size into width and height.
<!DOCTYPE html> <html>
<head>
<title>
Set the size of background image
</title>
<style>
#myDiv {
height: 200px;
width: 400px;
background:
background-size: 400px 200px;
}
</style>
</head>
<body>
<div id= "myDiv"></div>
</body>
</html>
|
Output:
Example 2: This example sets the background-size into percentage.
<!DOCTYPE html> <html>
<head>
<title>
Set the size of background image
</title>
<style>
#myDiv {
height: 200px;
width: 400px;
background:
/* Set the background-size in percentage */
background-size: 70%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id= "myDiv"></div>
</body>
</html>
|
Output: