Styling the Background and Foreground

28 Nov 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 9)

Colour Codes

To display colours on a Web page you can use hex colour codes, that are six digit numbers, preceded by the hash/number sign symbol (#). These can be used in stylesheets to define the RGB colour value for an element.

Background Colour

To define a background colour for an element in the stylesheet, use the property background-color: in any selector:

selector {background-color:#123456:}

Foreground Colour

To define a foreground colour (the text color) for an element in the stylesheet, use the property color: in any selector:

selector {color:#123456:}

Defining the background and foreground colour for the template

I’m using the same background colour for the body and content divisions. First, I’ll remove all the current background colours…

blockquote {background-color:#e1e5df;}
#c1 {background-color:#cdc9bf;}
#c2, #c4 {width:150px; background-color:#a79f91;}
#c1, #c5 {clear:left; background-color:#cdc9bf; padding:0.8em 0;}

…and then create a new group of selectors, with the new background-color property and accompanying value:

body, #c1, #c2, #c3, #c4, #c5 {background-color:#f5efef;}

For the foreground I’ll simply add the color property and value to the body selector:

color:#421c1c;

Also, I’ll group together the Heading selectors, and give them another colour value:

h1, h2, h3, h4, h5, h6 {color:#892d2d;}

Adding a background image

To add a background image to an element used the background-image: property. The value is the location of the image inside the image file (eg: images/bg.jpg), or if the image is remotely hosted use the full address (eg: http://imagehost/bg.jpg).

selector {background-image: url(images/bg.jpg);}

Prevent images from repeating

Background images repeat, by default. if you do not want the image to repeat, add the following property and value to an element:

selector {background-repeat: no-repeat;}

Repeating images horizontally and vertically

x (horizontal axis), and y (vertical axis) coordinates can be used to repeat and image either horizontally or vertically:

Horizontal repeat (x)

selector {background-repeat: repeat-x;}

Vertical repeat (y)

selector {background-repeat: repeat-y;}

Positioning background images

Background images can be positioned using the property background-position:, and a combination of various values listed below:

1. top
2. center
3. bottom
4. left
5. right

For example, if I wanted to position a background image at the top centre of an element I would use the following syntax:

selector {background-position: top center;}

You just need to remember that when you want to position an image either at the top, centre, or bottom, always use that value first.

Positioning images horizontally and vertically

Background images can be positioned using x (horizontal axis), and y (vertical axis) coordinates. the first value is the horizontal axis, and the second value is the vertical axis:

selector {background-position: x y;}

You can use position the image using ems (em), pixels (px) or percentages (%), or a combination of different units:

selector {background-position: 5em 10%;}

Adding a background image to the template

I have whipped up a 5 X 700px background-image, that needs to repeat horizontally across the entire body of the Web page. This can be achieved by adding the following properties and values to the body selector:

background-image: url(images/bg.jpg); background-repeat: repeat-x;

This is what the template looks like so far. You’ll also notice that I have changed the colour values for the table and table cell border, as well as the horizontal rule border:

table, td {border:1px solid #892d2d;}
.hr {border-top:1px solid #892d2d;}

< Back to everything
Keep going… >

Related Posts

• Bullet images for list items
• Create a background with vertical borders in Paint Shop Pro
• Styling Links
• Creating a <div> based Template using CSS (part 1 - 12)
• Creating rounded corners when working with screenshots