CSS Backgrounds and Colours

In this section, we take a close look at CSS backgrounds and colours.

Elements that can be displayed in colours defined through style rules are:

CSS Colours

We can use several methods to specify a colour for any CSS property that accepts colour values.

For example, if you want to specify the colour blue for a particular element in a CSS style rule, you could do it in any of the following ways:

color: blue;
color: rgb(0, 0, 255);
color: #0000ff;

We can style HTML element h1 like below:

h1
{
      font-family:Tahoma, Geneva, sans-serif;
      padding-left:2%;
      color:#F00;
}

Our h1 colour is red, font name Tahoma and padding-left 2%. #F00 is HTML hexadecimal color values. I use Photoshop to find my HTML colours.

CSS Backgrounds

CSS background properties are used to define the background effects of an element. CSS properties used for background effects.

Background Properties

background-attachment - Sets whether a background image is fixed or scrolls with the rest of the page

background-color - Sets the background colour of an element.

background-image - Sets the background image for an element.

background-position - Sets the starting position of a background image

background-repeat - Sets how a background image will be repeated.

background-clip - Specifies the painting area of the background (CSS 3).

background-origin - Specifies the positioning area of the background images (CSS 3).

background-size - Specifies the size of the background images ( CSS 3).

For the purpose of this training, we will not discuss the background-attachment, background-clip, background-origin and background-size property as these properties are more advanced.

Settng background-color

The background-color property specifies the background colour of an element. You can use background-color property for styling paragraphs, headings, id division, class division and so on. In our CSS, we want to sytle the body background colour to dark blue as follows:

body
{
      background-color:#044f8f;
}

Setting background-mage

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.

The location of the image should be specified relative to your CSS file. For example, if you keep your images in a subdirectory of the folder called images, you will need to edit the location of the image like so. (../ is a relative path in your website's root directory - this tells CSS that the image is located 2 level up in the image folder.

body
{
      background-image: url (../images/bodybg.jpg);
}

The url function can be used to specify any image file, similar to the way you’d use the img element’s src attribute. If you define a graphic as the background for a page that graphic will repeat or tile itself to fill up the entire browser viewport.

Setting background-repeat

The valid values for the background-repeat property are:

no-repeat – as the name suggest, the no-repeat value causes the background-image to be rendered once.

repeat-x – repeat-x forces the background image to repeat horizontally, left-to-right.

repeat-y – setting background-repeat to repeat-y results in the image being repeated along the Y axis, starting from the top of the element.

repeat – the default value for background-repeat, repeat causes the background-image to be tiled across the entire of the element, starting from the top left.

body
{
      background: url (../images/gradient2.png);
      background-repeat:repeat-x;
}