CSS background Property

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.

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>

Result

CSS background Property

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>

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>

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>

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>

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>

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.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

What are the properties of CSS background?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?