CSS background Property
Tags: learncss, cssb
Published: 2021-02-19 06:58:23

---
title: CSS background Property
published: true
date: 2021-02-17 11:59:11 UTC
tags: LearnCSS,CSSB
canonical_url: https://sharepointanchor.com/learn-css/css-background-property/
---

The [CSS](https://sharepointanchor.com/learn-css/ "CSS") background is used to **set all background style properties**. This is one of the CSS3 properties.

- The Background property includes the following properties.
  - **background-color**
  - **background-image**
  - **background-repeat**
  - **background-position**
  - **background-origin**
  - **background-clip**
  - **background-attachment**
  - **background-size**

## Syntax:

```

background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

```

## Values:

| **Value** | **Description** |
| --- | --- |
| background-color | It is used to **set the background color**. |
| background-image | This property will **set one or more image** s. |
| background-position | It specifies the **position of the background images**. |
| background-size | This property **sets the size of the background image**. |
| background-repeat | With this property, you can **specify how to repeat the background images**. |
| background-origin | It will **specify the positioning area of the background imag** e. |
| background-clip | This property **specifies the painting area of the background image**. |
| background-attachment | Specifies whether the **image is fixed or not**. |
| initial | It will **set** this property to its **default value**. |
| inherit | **Inherits this property from its parent** element. |

## Example of the background property:

This is an example code for the background property.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {

        background: #A4FDF1;

      }
    </style>
  </head>
  <body>

    <h2>Background property Example</h2>

    <p>Here the background color is set to blue.</p>

  </body>
</html>

```

## Result:

By running the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_ESPYV9J1kE.png)<figcaption>Background property</figcaption>

## Example of Background Property with an Image:

In the following code, we use the background property with an image applied to it.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

      }
    </style>
  </head>
  <body>

    <h2>Background property example</h2>

    <p>Here a background image is used.</p>

  </body>
</html>

```

## Result:

By executing the above code, you will get the result as shown in the below screenshot.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_E0YILZn5Bq.png)<figcaption>Background property with image</figcaption>

## Example of Background Property with Different Values: 

In the following code, we use different background properties. Check them below.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {

        background: #ccc url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png") no-repeat fixed center;

      }
    </style>
  </head>
  <body>

    <h2>Background property example</h2>

    <p>In this example background property specifies the background color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in the center.</p>

  </body>
</html>

```

## Result:

After executing the above code, you can get the output as shown in the below screenshot.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_NL3HtQ3iYi.png)<figcaption>Background property with different values</figcaption>

## Example of the background-size property: 

The following example uses the background-size property to specify the size of the background.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {

        background: #eee url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png") no-repeat center 100px;

        background-size: cover;
      }
    </style>
  </head>
  <body>

    <h2>Background property example</h2>

    <p>Here the size for the background is set to cover.</p>

  </body>
</html>

```

## Result:

By executing the above code, you will see the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_B8yXXeiXCn.png)<figcaption>background size property</figcaption>

## Example of background-clip property:

In this code, the background-clip property specifies how far the background should extend within an element.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        border: 8px dotted #B9B0FD;

        padding: 25px;

        background: #B9B0FD;

        background-clip: padding-box;

      }
    </style>
  </head>
  <body>

    <h2>Background property example</h2>

    <div>

      <p>The background-clip for this div element is set to padding-box.</p>

    </div>
  </body>
</html>

```

## Result:

After running the above code, you will get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_YS0vQjferG.png)<figcaption>Output of background-clip property</figcaption>

## Example of background-origin property: 

In this example, the background-origin property is used. Here, the background image starts from the upper-left corner.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        border: 10px double #ccc;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png");

        background-repeat: no-repeat;

        background-origin: padding-box;
      }
    </style>
  </head>
  <body>

    <h2>Background property example</h2>

    <p>Here background-origin: padding-box (default) is set.</p>

    <div></div>
  </body>
</html>

```

## Result:

Run the above code and get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_zM38c1GplZ.png)<figcaption>Background-origin property</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_0xd6jetFJL.png)<figcaption>Browser-support</figcaption>

The post [CSS background Property](https://sharepointanchor.com/learn-css/css-background-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).