background – CSS Property

CSS background property is most commonly used css-property. Its used to define the background styles for elements.

background property is a shorthand property to define all other individual background property, which are listed below:

background-color
background-image
background-position
background-size
background-repeat
background-attachment
background-clip


We will see each of them in details in upcoming posts.

Background CSS Property values are not inherited from the parent elements unlike font-size, or color css properties.

Below are some examples of background shorthand property

body {
    background: #cccccc; /* defining just the background-color */
} 

#header {
     background: blue url("../images/header-bg-pattern.png") repeat-x;
     /* defined background-color, background-image, background-repeat */
} 

background-position property can also accept the Percentage values.

By default following Initial Values are applied to background properties

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


Please go through details of each background property for more details and their uses.