What is the CSS background-size property?

The background-size property in CSSCascade Style Sheets is used to define the size of the background image.

Syntax

background-size: auto|length|cover|contain|initial|inherit;

Property values

• auto: This is a default value. It is used to display the original image with its original size.

• length: We use this to define the length and width of the background image. The first value should be considered width and the second value as height.

• cover: We use this to resize the background image so that it can easily fit in the container.

• contain: It is used to resize the background image to ensure that it is visible.

• percentage: It is used to set the background image in terms of the percentage of the parent element.

• initial: This sets the value to its default value.

• inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the background-size property.

Explanation

In this example, we have set the width of the border image as 200px. We can also set the width according to our own choice.