CSS Background Shorthand

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:

  • Example 1 - Specifies that a color is defined for background
  • Example 2 - Specifies that all properties are specified individually, which includes an image, color, image size, image repetition, and its attachment
  • Example 3 - Specifies that both a background color and a background image are set. In addition, the image is stretched to the full width of the element

Note - You cannot set the background-clip and background-origin properties by using the background property 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

« CodesCracker Home CSS Tutorial »

Like/Share Us on Facebook 😋