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 that 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 on 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("/build/images/web-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/web-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 the 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.

Souy Soeng

CSS background Property

CSS background Property

Syntax¶

Example of the background property:¶

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

Example of the background property with different values:¶

Example of the background-size property: ¶

Example of the background-clip property: ¶

Example of the background-origin property:¶

Values¶

Post a Comment

Souy Soeng