background

A shortcut allowing you to set all background properties at once. It combines:

• background-attachment;
• background-clip;
• background-color;
• background-image;
• background-position;
• background-repeat;
• background-size.

The code below sets a black background fill, a background image bkg.png that will not repeat, is centered vertically and horizontally, and will cover the entire area of the parent.

        
          
          div {  background: #000000 url("bkg.png") no-repeat center / cover;}
          div {
  background: #000000 url("bkg.png") no-repeat center / cover;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can specify one or several values for different properties, separating them with spaces. Values can be written in any order; the browser will determine which value corresponds to which property.

None of the values are mandatory, so unnecessary ones can be safely omitted.

💡 As with any shortcut, the property background should be used cautiously. If you need to override just one of the specified values, you will need to rewrite all the others.

💡 If no value is specified for a property within the shortcut and it is not specified in the code below, then the property will be set to its default value.

💡 The separate properties listed above are overridden by the property background specified below.