Hariom Prajapati
15 Aug 2022
CSSBackground size use to resize (set size) the background image.
Syntax -
background-size:valueX valueY;
or
background-size:value;
values
| Auto | It is use to display background size as a original size. |
| Percentage |
It is use to set background image with its height percentage and width percentage. First percentage value set the width and second percentage value set the height of the image. |
| Length |
It is use to set background image with its height length and width length. First length value set the width and second length value set the height of the image. |
| cover | It is use to cover the entire container . By applying this it has to stretch the image or cut a little bit off one of the edges |
| Contain | It is use to resize the background image to fully visible. |
For example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teknowize</title>
<style>
h1 {
background-size: 75% 75%;
background-image: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
Output
