CSS background Property

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

The background-color property is used when we want to change the color of some tag background.

The background-image property sets one or several background images for an element.

With the background-repeat property we can control the repeated position of an element.

We use the background-position property for the background image position.

The background-origin property defines the background positioning area which is the position of an image which is placed by using the background-image property.

The background-clip property is used to place background image or color to underneath its border.

The background-attachment property defines if the background image is fixed or it will scroll along with the rest of the page.

The background-size property is used to define the background image size.

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

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

Here see another example where an image is applied to the background property.

Example

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

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

Another example with the background-size property which is set to specify the size of the background.

Example

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

Example with background-clip. It specifies how far the background should extend within an element.

Example

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

Here is another example where the background-origin property is used. It lets the background image start from the upper left corner of the content.

Example

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

Related Recourses

Background-color, background-image, background-repeat, background-position, background-origin, background-clip, background-attachment, background-size.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Background property includes the following properties, except:




Related articles