clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Background Size

Imperial Advance Hero Image

CSS Background Size

Background 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

Background Size

CSS