background

The background CSS property is a shorthand for all the available background properties, which can be used to set background features in a single declaration.

Initial Value relative (initial) to each property
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation Based on property value (individual)

The background property is a shorthand property that specifies background-related styles all at once. It can be used to specify the background color and image simultaneously, without having to prepare each property separately.

The following properties can be manipulated with the background shorthand:

  • background-attachment – specifies background scrolling.
  • background-clip – specifies the background extension range.
  • background-color – specifies the background color.
  • background-image – specification of the background image.
  • background-origin – specify background alignment criteria.
  • background-position – specify background position.
  • background-repeat – specification of background repeat.
  • background-size – specification of background dimensions.

When specifying multiple values, separate them with a single-byte space and list them in a row.

The values can go in any order; the browser will determine which one corresponds to the desired property. For details, see the information about each property separately. Specifying parameters for several backgrounds at once is also acceptable, listing them separated by commas.

Syntax

/* background-color value */

background: black;
background: #333;

/* background-image value */

background: url("//example.com/image.png");

/* Multiple values */

background: blue padding-box;
background: url("//example.com/image.png") repeat-x;
background: url("//example.com/image.png") center/50% no-repeat;

/* Global values */

background: inherit;
background: initial;
background: revert;
background: unset;

Description

valuewhat it does
background-colorSpecifies the background color (HEX, RGB, RGBA, HSL, HSLA, or Predefined Colors).
background-imageSpecifies one or more background images for an element.
background-positionSpecifies the position (position) of the background image.
background-sizeSpecifies the size of the background image/s.
background-repeatSets how the background image will be repeated.
background-originDefines the positioning area of ​​the background image/s.
background-clipSpecifies the background drawing area.
background-attachmentSets whether the background image behaves during scrolling (fixed or scrolls with the rest of the page).
initialSets a property to its default value.
inheritSpecifies that the value is inherited from the parent element.

Example

HTML & CSS

<div class="bg-example-sd"></div>

.bg-example-sd { 
background: gray url('https://stackdiary.com/logo.png') repeat-x center;
height: 150px;
}