Getting Started with Cascading Style Sheets - Part 4

Part 4 - Background Colour

In part three we looked at how style sheets can be used to enhance the level of control you have over text both in terms of typeface as well as fine positioning. In this part we'll be concentrating on the background options that add new flexibility to your page designs.

There is a lot of duplication with existing HTML tags and you may want to choose to work with only CSS properties or a mix of the two. As there is more you can do with the CSS properties, you will probably want to stick with those where possible.

As an example, with an HTML table, you'd need to specify the colour for every cell but by using a CSS definition for a cell, you'd only need to specify the background colour once saving greatly on download times for your page.

Color

The Color property, not surprisingly, lets you assign a colour to any element. Colour can be expressed in one of three ways. The easiest is probably by using the common names e.g. red, blue etc. You can also use hex values such as #FC0000 or RGB values using the notation rgb(xxx,xxx,xxx) where the xxx's represent red, green and blue numeric values. An example of this would be rgb(55,80,126). You can also use intensity percentages of each RGB colour - rgb(100%, 50%, 66%). Examples are:

H1 { color:blue }

H1 { color:#000080 }

H1 { color:rgb(30,200,70) }

Background-Color

Background-color can take colour values in the same way as Color above. However, the background-color property also lets you specify the word 'transparent' as a colour. Whereas the HTML background tag applies to the whole screen, this property only applies to a particular element such as a title or paragraph.

BODY { background-color:#FF4444 }

Background-Image

Background-image lets you specify a graphic file that will be used as a background for an element. This can easily look messy so this tag should be used with care if you intend having a text displayed over a busy looking image. The image might even obscure the text completely.

If your background image only applies to a few elements you should either include a plain background of a similar colour to be used behind the rest of the page or use the background-color property to specify a colour that is harmonious with the images used.

The background image can be specified as either a full URL such as http://www.mysite.com/background.gif or relative URL such as /images/background.gif.

H1 { background-image: /images/background.gif }

Background-Repeat

This useful property controls how background images are repeated on screen. You can either have an image repeat horizontally only, vertically only or all over the screen like a normal HTML background image. Acceptable values are repeat, repeat-x, repeat-y or no-repeat. You would usually use this in conjunction with the background-image property as follows:

BODY { background-image /images/background.gif; background-repeat: repeat-x }

Background-Attachment

The background-attachment property determines if a background image stays at a fixed position on the page or scrolls with the text. Suitable values are 'scroll' and 'fixed'. Netscape Navigator version 4 doesn't support this feature so be aware that not everyone will get the correct results when viewing your pages.

BODY { background-attachment: fixed }

Background-Position

This powerful property lets you specify the position of a specified background image. This is another feature not supported by Netscape Navigator 4. There are several options for this property. The easiest is by using the keywords left, right, center, top, centre and bottom. You can also use percentages and lengths if required. In the case of percentages you could quote the x then y positions of the image relative to the element they are related to. An example explains this better.

BODY { background-image: /images/background.gif; background-position: 20% 30% }

In this case, the image background.gif is positioned 20% of the way across the BODY and 30% of the way down.

You can also quote the position in lengths such as 50px for 50 pixels in. However, due to the differences in different systems display resolutions, it is usually recommended to avoid this method and stick with percentages if at all possible.

Lengths and percentages can be combined so 20% 50px would be acceptable. You cannot mix lengths with keywords so 20% bottom wouldn't be valid.

Background

Background is the shorthand property that lets you combine all the other properties in to one statement. An example might be:

P { background: #c00 url(fire.jpg) no-repeat bottom right }

Which would set the paragraph background to an image called fire.jpg. The rest of the background would be red (#c00) and the image would be non-repeating and positioned at the bottom right hand side of the paragraph.

That wraps things up for background colour. In part five we'll be looking at what you can do to enhance how hyperlinks look and behave along with a brief look at classes.

 

Iain Laskey
See Iain's site at www.pcbookreview.com