CSS Backgrounds Background Shorthand

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

The background property can be used to set one or more background related properties:

ValueDescriptionCSS Ver.
background-imageBackground image to use1+
background-colorBackground color to apply1+
background-positionBackground image's position1+
background-sizeBackground image's size3+
background-repeatHow to repeat background image1+
background-originHow the background is positioned (ignored when background-attachment is fixed)3+
background-clipHow the background is painted relative to the content-box, border-box, or the padding-box3+
background-attachmentHow the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport1+
initialSets the property to value to default3+
inheritInherits property value from parent2+

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.



Got any CSS Question?