CSS Backgrounds

Itacen Sabacok | Apr 3, 2021

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}