CSS background Property

The background property is a shorthand property for setting individual longhand background properties at once. It can be used to set the values for one or more of background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The initial value of background property is equal to the combination of initial value of all longhand properties —

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

You can apply it to all elements. It also applies to ::first-letter and ::first-line. The property is not inheritable.

The background CSS shorthand property will assign explicitly given values to respective properties and set missing properties to their initial values.

Like other background properties, it can take multiple comma-separated values, where each value corresponds to a specific background layer.

Only longhand properties that are animatable by themselves are animatable in the shorthand version. So, you can only animate background-color, background-position and background-size.

Syntax

This is the formal syntax for using background property —

background: [ <bg-layer> , ]* <final-bg-layer>    

/* where */
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}    

/* and */
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} ||<'background-color'>

Here are some examples of using this property —

/* Using a <background-color> */
background: orange;  

/* Using a <bg-image> and <repeat-style> */
background: url("flower-pattern.jpg") repeat-y;  

/* Using a <box> and <background-color> */
background: border-box blue;  

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/lake.png");

Acceptable Values

<‘background-image’>

See background-image entry for a list of possible values.

<‘background-position’>

See background-position entry for a list of possible values.

<‘background-size’>

See background-size entry for a list of possible values.

<‘background-repeat’>

See background-repeat entry for a list of possible values.

<‘background-origin’>

See background-origin entry for a list of possible values.

<‘background-clip’>

See background-clip entry for a list of possible values.

<‘background-attachment’>

See background-attachment entry for a list of possible values.

<‘background-color’>

See background-color entry for a list of possible values.

Examples

In the following example, I applied a background image to three different elements. You can see how the behavior and location of the background image has changed in all three cases. In the third case, the image is fixed to the viewport and it won't move with the element. To know in more detail about these properties and the values they can take, you can read the corresponding article.

See the Pen CSS background Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The background shorthand property is fully supported in all major browsers like Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top