CSS

CSS Background

Background Color

The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:

body {
background-color: #FFFFFF;
}

With CSS, a color is most often specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

The example below shows the h1, p, and div elements with different background colors:

h1 {
background-color: #6495ed;
}

p {
background-color: #e0ffff;
}

div {
background-color: #b0c4de;
}

Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

body {
    background-image: url(“paper.jpg”);
}

Repeat Background Image Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically. To set it only horizontally, we add the background repeat style:

body {
   background-image: url(“paper.jpg”);
   background-repeat: repeat-x;
}

Set Position and No-Repeat

To show the background image only once, we set the no repeat property:

body {
background-image: url(“paper.jpg”);
background-repeat: no-repeat;
}

However, doing that will have the text covering the image. You can change the position of the image so it doesn’t disturb the text:

body {
   background-image: url(“paper.jpg”);
background-repeat: no-repeat;
background-position: right top;
}

Shorthand Property

There are many properties to consider  when dealing with backgrounds. To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply “background”:

body {
  background: #ffffff url(“paper.jpg”) no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

It does’t matter if one of the property values is missing, as long as the ones that are there are in this order.

The background-attachement sets whether a background image is fixed or scrolls with the rest of the page.