CSS background Property

❮ Prev Next ❯

The CSS background is a shorthand used to set all background style properties. Background property includes the following properties:

background-color, which is used for setting a background color.
background-image, which is used for setting one or multiple background images for an element.
background-repeat, which is used for controlling the repeated position of an element.
background-position, which is used for setting a background image position.
background-origin, which is used for defining the background positioning area which is the position of an image which is placed by using the background-image property.
background-clip, which is used for placing background image or color to underneath its border.
background-attachment, which is used to define if the background image is fixed or it will scroll along with the rest of the page.
background-size, which is used to define the background image size.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

If one of the properties in the background shorthand property is background-size, a slash should be used for separating it from background-position.

When several background-image sources are used but background-color is also needed, it should be last in the list.

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;

Example of the background property:

<!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

Example of the background property with an image applied to it:

<!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 »

See another example with background property where background-color, background-image, background-repeat and background-attachment values are applied.

Example of the background property with different values:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.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 »

In the following example, the background-size property is used to specify the size of the background.

Example of the background-size property:

<!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 »

Here, the background-clip property specifies how far the background should extend within an element.

Example of the background-clip property:

<!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 »

In the next example, the background-origin property is used. It lets the background image start from the upper left corner of the content.

Example of the background-origin property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("/build/images/w3docs-logo-black.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.