CSS Tutorial Part II

CSS Background Properties

Nana Gilbert-Baffoe

Printer Friendly Version

The CSS background properties work with setting attributes about an element's background display. Before the advent of CSS many of these properties could only be set in the body element, some of these properties will be familiar to you'these include familiar properties such as background color, and background image. With CSS, a few unfamiliar properties pop up which enable you to do a whole lot more with the background of a page or element. Examples of some of these new capabilities include: the ability to set whether the background should repeat, and the ability to set the initial x and y coordinates of the image in the background.

Background-color

As I mentioned, you may already know you can set the background color of a web page using plain old HTML, but did you know that using CSS not only can you set a background color for a page, but you can also set the background color for other elements such as P, DIV, SPAN and more? Look at how easily this can be done:

Try It Out - The background-color Property

<html>

<head>

<title>The background-color Property</title>

</head>

<body>

</body>

</html>

Take a look

How It Works

The background-color property accepts the same values as the color property we covered previously in the first article. In this example, we. ve applied background colors to three P elements'the first P element has its background color set to yellow, using RGB values.

The second two P elements use the assigned color names to set the second and third P elements to Green and blue respectively

Background-image

When you need to specify an image to use as a background for an element, the background-image property is the property you need to work with.

Try It Out - The background-image Property

<html>

<head>

<title>The background-image Property</title>

</head>

</body>

</html>

Take a look

How It Works

In order to point to an image file to be used as the background, you need to indicate it using the following format:

url(image_filename.gif)

In this example, the filename for the image was s2slogo.gif, so when we add that to our format template we get:

As with the src attribute of the image tag, the URL() notation also accepts files located on other servers. For example, an image located at http://www.s2snetwork.com/s2slogo.gif would be referenced in the following manner:

Background-attachment

Previously the only way to make a background fixed or non-scrolling was to use the bgproperties attribute of the BODY element. Unfortunately, Netscape's browser did not support this property and in IE only the BODY element had this property. Using the CSS background-attachment property, you can now implement this neat feature in both browsers.

Try It Out - The background-attachment Property

<html>

<head>

<title>The background-attachment Property</title>

</head>

<div style= "width:10px;"> Previously the only way to make a background fixed or non-scrolling was to use the bgproperties attribute of the BODY element. Unfortunately, Netscape's browser did not support this property and in IE only the BODY element had this property. Using the CSS background-attachment property, you can now implement this neat feature in both browsers. </div>

</body>

</html>

Take a Look

How It Works

When you scroll the text in this window, you'11 notice that the background doesn't move'the line responsible for this is the following:

One thing to keep in mind is that when working with background images, you need to make sure the foreground text color and background images do not clash. If they do, you end up with the situation we have in this example'the text is hard to read'some ways to fix this may be to fade the background image so it's much lighter, or change to text color to ease readability.

Background-repeat

In the past, when you specified a background image in the BODY element, the image would automatically tile both along both the x and y-axis. Now the background-repeat property gives you the option to tile horizontally along the x-axis, or vertically along the y-axis. You also have the choice to not tile the image at all; in this case, the image will be placed at the top left corner of the page by default'the four values that let you do this are:

repeat 'the image is tiled both horizontally and vertically'this is the default value.
repeat-x 'the image is tiled horizontally
repeat-y 'the image is tiled vertically
no-repeat 'the image is not tiled

Look at the following example, to get a feel for how this works.

Try It Out - The background-repeat Property

<html>

<head>

<title>The background-repeat Property</title>

</head>

</body>

</html>

Take a look

How It Works

This short example tiles the S2SNetwork logo along the top of the document.

First, the background image is set using the background-image property, and then it's tiled only along the x-axis with the background-repeat property set to repeat-x.

Background-position

When the background image is not tiled using the no-repeat value, the image can be positioned with the background-position property.

Try It Out - The background-position Property

<html>

<head>

<title>The background-position Property</title>

</head>

</body>

</html>

**image**

How It Works

The background image in this example has been centered in the document with the background-position property'the value entered is 50% 50%'this puts the image in the center of the browser window, no matter what the size of the browser is.

Background

Just like the CSS font properties, the CSS background properties have a shortcut property that you can use to quickly set a whole range of background settings'this includes, background-color, background-image, back-ground-repeat, background-attachment and background-position. In the following example, you can see how having all these properties set in one place saves much time and space.

Try It Out - The background Property

<html>

<head>

<title>The background Property</title>

</head>

<span style="color: Purple;">Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV Sample text inside DIV </span>

</div>

</body>

</html>

Take a look

How It Works

The five different background styles properties set in the DIV element really reduces the amount of typing you have to do, and can speed up the design process.

Unfortunately, this convenience also has a downside. Compared to individually defining each rule, people may find it a bit harder to read and understand a shortcut style property.

Onto Page III

Back Page I

About the Author

Nana Gilbert-Baffoe is founder of the S2SNetwork'the Student-to-Student Trading Network

Printer Friendly Version