CSS Backgrounds Background Shorthand
Example
The background property can be used to set one or more background related properties:
| Value | Description | CSS Ver. |
|---|---|---|
background-image | Background image to use | 1+ |
background-color | Background color to apply | 1+ |
background-position | Background image's position | 1+ |
background-size | Background image's size | 3+ |
background-repeat | How to repeat background image | 1+ |
background-origin | How the background is positioned (ignored when background-attachment is fixed) | 3+ |
background-clip | How the background is painted relative to the content-box, border-box, or the padding-box | 3+ |
background-attachment | How the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport | 1+ |
initial | Sets the property to value to default | 3+ |
inherit | Inherits property value from parent | 2+ |
The order of the values does not matter and every value is optional
Syntax
The syntax of the background shorthand declaration is:
background: [<background-image>] [<background-color>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];
Examples
background: red;
Simply setting a background-color with the redvalue.
background: border-box red;
Setting a background-clip to border-box and a background-color to red.
background: no-repeat center url("somepng.jpg");
Sets a background-repeat to no-repeat, background-origin to center and a background-image to an image.
background: url('pattern.png') green;
In this example, the background-color of the element would be set to green with pattern.png, if it is available, overlayed on the colour, repeating as often as necessary to fill the element. If pattern.png includes any transparency then the green colour will be visible behind it.
background: #000000 url("picture.png") top left / 600px auto no-repeat;
In this example we have a black background with an image 'picture.png' on top, the image does not repeat in either axis and is positioned in the top left corner. The / after the position is to be able to include the size of the background image which in this case is set as 600px width and auto for the height. This example could work well with a feature image that can fade into a solid colour.
NOTE: Use of the shorthand background property resets all previously set background property values, even if a value is not given. If you wish only to modify a background property value previously set, use a longhand property instead.
