Colors and Background using CSS

The color property describes the foreground color of an element.

For example, to make all <h1> headlines in a document dark red.

h1 {
color: #ff0000;
}

Colors can be entered as hexadecimal values (#ff0000) or you can use the names of the colors (red) or rgb values (rgb(255,0,0)).

The background-color property describes the background color of elements.

The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element. You can also apply background colors to other elements including headlines and text.

body {
background-color: yellow;
}
h1 {
color: red;
background-color: white;
}

The CSS property background-image is used to insert a background image.

To insert the image as a background image for a web page, simply apply the background-image property to <body>and specify the location of the image.

body {
background-color: white;
background-image: url("bg_image.jpg");
}

By default, the image is repeated both horizontally and vertically to cover the entire screen. The property background-repeat controls this behaviour.

  • background-repeat: repeat-x (The image is repeated horizontally)
  • background-repeat: repeat-y (The image is repeated vertically)
  • background-repeat: repeat (The image is repeated both horizontally and vertically)
  • background-repeat: no-repeat (The image is not repeated)

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

  • background-attachment: scroll (The image scrolls with the page - unlocked)
  • background-attachment: fixed (The image is locked)

By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. All of them are formatted as a set of coordinates. The coordinates can be indicated as percentage of the browser window, fixed units (pixels) or you can use the words - top, bottom, center, left and right.

  • background-position: 50% 25% (The image is centrally positioned and one-fourth down the page)
  • background-position: top right (The image is positioned in the top-right corner of the page)

Compiling: background

The property background is a short hand for all the background properties. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

For example,

background-color: #FFCC66;
background-image: url("globe.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Using background, the same result can be achieved in just one line of code:

background: #FFCC66 url("globe.gif") no-repeat fixed right bottom;

The list of order is as follows:

  1. [background-color]
  2. [background-image]
  3. [background-repeat]
  4. [background-attachment] 
  5. [background-position]

If a property is left out, it will automatically be set to its default value.