Background Shorthandsuggest change
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
fixed) | 3+ |
background-clip | How the background is painted relative to the
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
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>];
Simply setting a
background-color with the
background: border-box red;
background-clip to border-box and a
background-color to red.
background: no-repeat center url("somepng.jpg");
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
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.