CSS Background Shorthand

« Previous Tutorial Next Tutorial »

The background Property

The background property is the shortcut of specifying several background properties at the same place in a style sheet.

It can be used to specify the values for the background-color, background-image, background-repeat, background-attachment, background-position, and background-size properties.

Some examples of using the background property are given as follows :

body { background: green }                                      /* Example 1 */
p { background: url("people.png") blue 50% repeat fixed }       /* Example 2 */
E { background: orange url("metal.jpg")/100% auto               /* Example 3 */

Here is the explanation of the above CSS code fragment:

Note - You cannot set the background-clip and background-origin properties by using the background property shorthand.

CSS Background Shorthand Example

To set all properties in one declaration (shorthand property), see the below example to know how to do it:

<!DOCTYPE html>
   <title>CSS Background Shorthand Example</title>
      body { background: #dedede url("nature.jpg") no-repeat right top; }

<h2>CSS Background Shorthand Example</h2>
<p>This is an example on CSS background shorthand.</p>


Here is the sample output produced by the above CSS background shorthand example code:

CSS Background Shorthand

Note 1 - When using the background shorthand property, the order of the property values is:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Note 2 - It does not matter if one of the property value is missing, just specify the next, but the order will be the above mentioned.

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.