background-color
1body {
2 background-color: blue;
3}
background-image
1p {
2 background-image: url("example.gif");
3}
background-attachment
1div {
2 background-attachment: fixed;
3}
4
5span {
6 background-attachment: scroll;
7}
8
9.className {
10 background-attachment: inherit;
11}
background-repeat
1div {
2 background-image: url("example.png");
3 background-repeat: repeat-x;
4}
5
6span {
7 background-image: url("example.png");
8 background-repeat: no-repeat;
9}
background-position
1span {
2 background-position: left top;
3}
Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
1/* Option 1 */
2p {
3 background-color: #04BA6D;
4 background-image: url("example.png");
5 background-repeat: no-repeat;
6 background-position: left top;
7}
8
9/* Option 2 - shorthand property */
10p {
11 background: #04BA6D url("example.png") no-repeat left top;
12}