The **`background-size`** property in #key# CSS: Cascade Style Sheets #key# is used to define the size of the background image. 

# 
#  Syntax

---
```css
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 #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the `background-size` property.

<title>Example</title>

<div class="bg">
Welcome <code>To Educative</code>
</div>

.bg {
  width: 200px;
  height: 200px;
  padding: 20px;
  background-color: rgb(22, 100, 145);
  background-image: url(/pix/samples/bg1.gif);
  border: 20px solid rgba(0,0,0,0.3);
  background-size: contain;
}

codemirror

# 
## 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. 

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.   