CSS background Property

The CSS background property is a shorthand that lets you set every background style of an element in a single declaration instead of writing each property on its own line. Behind the scenes it expands to the following longhand properties:

background-color — sets a solid background color.
background-image — sets one or more background images for an element.
background-repeat — controls whether and how the background image tiles.
background-position — sets the starting position of the background image.
background-origin — defines the area the image is positioned relative to (border-box, padding-box, or content-box).
background-clip — defines how far the background (color and image) extends within the element.
background-attachment — defines whether the background scrolls with the page or stays fixed.
background-size — defines the size of the background image.

Why use the shorthand

Writing one background line is shorter and easier to read than five or six separate properties, and it makes your intent obvious at a glance. There is one important side effect to be aware of: the shorthand resets every background longhand you don't mention back to its initial value. For example, background: red; also resets any previously set background-image, background-position, and so on. Because of this, declare the shorthand first and any overrides (like a separate background-size) afterward.

Ordering and special rules

The values inside background can appear in almost any order, but two rules matter:

background-size must follow background-position, separated by a slash (/). For example: background: url(bg.png) center / cover; — center is the position and cover is the size.
When multiple background images are layered, background-color must come last, in the final layer only, because the color paints behind all the images.

Initial Value	See individual properties.
Applies to	All elements. It also applies to ::first-letter.
Inherited	No.
Animatable	Yes. Background-color, background-position, and background-size are animatable.
Version	CSS1+ new properties in CSS3
DOM Syntax	object.style.background = "blue url(img.jpeg) bottom left repeat";

Syntax

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

Examples

A simple background color

The most basic use of the shorthand is to set just the background color. Any value the shorthand accepts can be omitted; the others fall back to their initial values.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Try it Yourself »

Result

![CSS background Property](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Using a background image

You can pass a url() to the shorthand to paint an image into the background.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Try it Yourself »

Combining several values

This example sets the color, image, repeat behavior, attachment, and position in one declaration. The image is centered, not repeated, and fixed in place while the page scrolls.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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 center.</p>
  </body>
</html>

Try it Yourself »

Setting the background size

Because background-size cannot be combined with the rest of the shorthand without a slash, it is often cleaner to set it on its own line after the shorthand. Here cover scales the image to fill the whole element.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") 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>

Try it Yourself »

Clipping the background

The background-clip property controls how far the background paints within the element. With padding-box, the background stops at the inside edge of the border, so it does not show through a dotted or dashed border.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        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>

Try it Yourself »

Positioning the background origin

The background-origin property sets the area the image is positioned relative to. With padding-box (the default), the image starts from the inner edge of the border.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>

Try it Yourself »

Values

Value	Description
background-color	Sets background color.
background-image	Sets one or more images.
background-position	Specifies the position of the background images.
background-size	Sets the size of the background image.
background-repeat	Specifies how to repeat the background images.
background-origin	Specifies the positioning area of the background images.
background-clip	Specifies the painting area of the background images.
background-attachment	Specifies whether the image is fixed or not.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

If you need finer control, reach for the individual longhand properties:

Practice

What are the properties of CSS background?

Why use the shorthand

Ordering and special rules

Syntax

Examples

A simple background color

Result

Using a background image

Combining several values

Setting the background size

Clipping the background

Positioning the background origin

Values

Related properties

Practice