Background-size property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-22-2021 14:37:15

---

Background Size Property

The background-size property is used to set the size of the elements background image. If size is not set than images takes their natural size, or it can stretched or may repeat also.

The syntax for background-size property is:
background-size: ;
You can set single value, two value or multiple backgrounds in this property.

Example:
“Global value”
background-size: intital;
background-size: inherit;
background-size: unset;
“Keyword Value”
background-size: cover;
background-size: contain;
“One Value – it contains only width and height value is default”
background-size: 80%; “percentage”
background-size: 500px; “length”
background-size: auto; “default value”
“Two Value – first value is of width and second is of height and mixed values can be use“
background-size: 80% 50%;
background-size: 80% 300px;
background-size: 500px auto;
background-size: auto auto;
“Multiple backgrounds – first image size is define and other value is separated by commas“
background-size: 80% 50%, cover;
background-size: 80% 300px, contain;
background-size: auto, auto;


Code Example:



We have made blog on CSS tutorial from basic, if you haven’t read them so Comments

Share your thoughts about this post

Submit