CSS Background Size Properties

 

CSS Background-Size Property

 

The background-size property in CSS is used to set the size of the background image. The image may be positioned left from its natural size, stretched, or constrained to fit in the available space.

 

Ex 1- This Program using background-size property with two values. One is default and other one is 300x 100 x.

 

CSS Code

 

Output

 

 

Ex 2- The Size of the Background image is set in percent of the Percent of the parent element.100% width and 80% Height.

 

CSS Code

 

 

Output

 

Ex 3- The background image is resized to cover the container, even if it has to stretch the image or cut a little bit off one of the edges.

CSS Code

 

 

Output

 

 

Ex 4- The background Image is resized to make sure the image is fully visible.

 

CSS Code

 

Output

 

 

Ex 5- By use in two images. We have to specify the size of the first background image with cover and second background image with contain.

 

 

CSS Code

 

Output