CSS background

Shorthand way of expressing the various background properties of one or more element backgrounds in any order using a single declaration.

Syntax

background: <value>;

Copy to clipboard
Copy to clipboard

where <value> can be any of the following:

• Attachment value: scroll, fixed
• Blend mode value: dark, light
• Clip value: content-box, padding-box, border-box
• Color value: rgba(255, 0, 255, 0.3)
• Image value: url('cat.png')
• Origin value: content-box, padding-box, border-box
• Position value: top, 50% 50%
• Repeat value: repeat, repeat-x, round
• Size value: contain, cover

Example 1

Sets rebeccapurple as the background color:

body {
  background: rebeccapurple;
}

Copy to clipboard
Copy to clipboard

This will display:

Example 2

Specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to not be repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center:

body {
  background: blue url('whale.png') no-repeat fixed center;
}

Copy to clipboard
Copy to clipboard

This will display: