X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS background Property

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

  • background-color, which is used for changing the color of some tag background.
  • background-image, which is used for setting one or several background images for an element.
  • background-repeat, which is used for controlling the repeated position of an element.
  • background-position, which is used for the 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>

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("/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>

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("/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>

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

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Background property includes the following properties, except:



Do you find this helpful?

Related articles