CSS Background Size
The properties are used for specifying the size of theBackground-size image, set the image size that is used as a background for an HTML Web page or element.
Therefore, the Background-size properties are one of the most useful properties in CSS. The image natural size can be stretched, or constrained to fit in viewpoint or available space.
how to use CSS Syntax?
|
1 |
background-size: cover|contain|auto|length|inherit|initial; |
|
1 2 3 4 5 |
#demo1 { background: url(background-image.png); background-size: cover; background-repeat: no-repeat; } |
|
1 2 3 4 5 |
#demo2 { background: url(background-image.png); background-size: contain; background-repeat: no-repeat; } |
|
1 2 3 4 5 |
#demo3 { background: url(background-image.png); background-size: auto; background-repeat: no-repeat; } |
|
1 2 3 4 5 |
#demo4 { background: url(background-image.png); background-size: 400px 500px; background-repeat: no-repeat; } |
Properties Value Description
| Value | Description |
|---|---|
cover |
when you use cover value i.e. Resize the background image to cover the entire container in which container want to cover with background-image, even, If the proportions of the image differ from the element, cut a little bit either vertically or horizontally so that no empty space remains. |
contain |
Therefore, resize the large images without cropping or stretching the image to make sure the image is fully visible |
auto |
auto value is used as Default value. in this default value, the image is displayed in its original size. |
length |
such as in length CSS syntax value used for Stretches the image in the corresponding dimension to the specified length and length provide in pixel(px) such as (100px 200px) or percentage (%) such as (15% 20%). the most important thing is that Negative values are not allowed. you can Set the width and height of the background image according to need. here, The first value sets the width, and the second value sets the height. |
inherit |
Finally, In case Background-size inherits this property from its parent element |
initial |
you can Sets initial value property to its default value |