Info On...

CSS and Backgrounds

Use these to jump around or read it all...

[Background Colors]
[Backgrounds Behind Words]
[Background Text Images]
[Full and Partial Page Backgrounds]
[Background-Repeat]
[Positioning a Background: The Watermark]
[Fix It]

     The questions that comes into Bison HTML runs in topic spurts. One month everyone will want to know about JavaScript. The next all the questions are on images. Well, lately the hot topic has been backgrounds. Really.
     So, in an effort to give the people what they want, here's a look at backgrounds at the HTML 4.0 level, style sheets and all. And I think it's great. I've only written a couple of background lessons, and my first background lesson was one of the original HTML lessons. So, it's been a while.

     Before delving into this lesson, you should know that I'm going to assume you have a general knowledge of Style Sheets. Now, if the term "Style Sheets" is Greek to you, you should read my basic Style Sheet lesson first or you're going to get mighty lost.

     Oh, and in case you're interested, I've also put together a short lesson on how to make a great sideline background. Click here to read it.

     I'm going to follow the same basic format as my first background lesson. After all, it's withstood three years of reading. That said, we'll start with:

Background Colors

     If you're simply interested in giving a page a background color, the use of style sheets, to me at least, seems like overkill. Here's the format. Remember that this goes inside your page's <HEAD> flags:

<STYLE TYPE="text/css">

BODY {background-color: #FFFFFF;}

</STYLE>

     Then in your document you simply write the flag <BODY> and you get a white background through the Style Sheet. It's a bit much, when you could have simply written in BGCOLOR="FFFFFF" and been done with it.
     If you've read over the positioning lesson, you know that color backgrounds really start to shine when putting class="green">backgrounds behind words.

Backgrounds Behind Words

     This is a pretty simple method. You can do this one of two ways. You can either assign a flag a specific color (but that means you'll be affecting the text with say, a bold or an italic, every time you want color) or you set up a series of color classes that you can call on to produce a background without changing the text by using the <SPAN> or the <FONT>flag.
     I've done both above. Notice the purple and the green. One is italic and one is bold. Here's the Style Sheet code:

<STYLE TYPE="text/css">

I {background-color: #ffff00;}
B {background-color: #00ffff;}

</STYLE>

     That works well if you want all bold text to be green and all italic text to be purple-backed. But that's not always good for your page. Instead, try setting up a class system:

<STYLE TYPE="text/css">

.blue {background-color: #ffff00;}

</STYLE>

     Now, you're able to set text background color anytime you want. No matter what flag you are using, you can put CLASS="blue" inside of any flag and the blue background will pop up.
     But how do you get that class without affecting the text with a bold flag or the like. You can either go with a FONT flag or use the newer HTML 4.0 flag SPAN. You may want to go with FONT for now if the background is all you're interested in. But then again, SPAN also offers that wonderful tool tip through the use of a TITLE attribute flag that you cannot get through the FONT flag. So, make your choice. Here's what they both look like: <FONT CLASS="blue:>text text</FONT>

<SPAN CLASS="blue:>text text</SPAN>

     Of course, you also use the background to go behind an entire paragraph by putting the CLASS flag inside the <P> flag. Then you'll need to use the </P> flag to stop the color.

     Hey! Wouldn't it be neat if you could do that paragraph background above, but instead of just blue color, actually have an image as the background? Well, you can.

Background Text Images

     Now let's use what we know so far to get an image behind a paragraph.

     Here's the image we'll use for the background. Its name is bg2.gif and it is in the same directory as the page that will be using it so there's no need for subdirectories:

background2.gif

     So now I need to babble on for a while in order to get a block of text that's large enough so that you can see the background effect underneath the text. Babble, babble, babble. Talk, talk, talk. *sigh*

     You can follow the CLASS format outlined above, but that will only get the effect in Netscape Navigator. In order to get the effect in both browsers you need to place a STYLE attribute inside the <P> flag itself. It looks like this:

STYLE="background-image: url(bg2.gif)"

     Note the "url()" format above to denote the image's location. If you have your images in subdirectories, you need to get them all in there. Just put that in the <P> flag and you'll get the background effect, even if your page already has a full background. This page has a full background.

     But what about page backgrounds?

Full and Partial Page Backgrounds

     Okay, you probably know how a basic background is done. You add the BACKGROUND="image.gif" flag to the <BODY> flag. And if you've been following along, you can probably guess the basic format for adding a background image through Style Sheets:

<STYLE TYPE="text/css">

BODY {background-image: url(bam.gif); }

</STYLE>

     It's the same basic format as the background color except you are offering an image. In order to show you what these flags do, I've created a new background image that you'll be able to see tile and repeat. It looks like this:

bg image

     It's a simple image of my dog that was run through PaintShop Pro with an edge added.

     Okay, now we're dealing with the background of a page, all of the text and images within the page's <BODY> flag. So it is best if we now follow the <STYLE TYPE="text/css"> style flags </STYLE> in the <HEAD> flags format. We'll start with the format above. Remember, I've placed the Style Sheet commands above in the page's <HEAD> flags. Then all I did was use one <BODY> flag. The Style Sheet commands did the rest.

See the flags place a background
Make sure to look at the source code

Background Repeats

     Now let's play with the tiling of the background. To do so, we'll need a new flag, background-repeat:. It is implemented like this:

<STYLE TYPE="text/css">

BODY {background-image: url(bam.gif);
background-repeat: attribute; }

</STYLE>

     Please note the fancy brackets still surround the full Style Sheet descriptions. Also note the semicolon's placement. It's important.

     Now, see where I have the word "attribute"? The background-repeat: flag has three attributes:

Positioning a Background: The Watermark

     Now we've moved into what's known as a "proprietary" flag. The following section applies to Internet Explorer 4.0 (or better) browsers only.      The sign of good paper is the watermark, the logo of the company or the brand of the paper sitting as a transparent "background" for all the world to see. It looks great. Why not get that look on your Web page? Get one background image to sit right where you want it. It's done with this flag:

background-position: ##px ##px;

     You can also use percentages in place of the ##px ##px. Just follow this format: ##% ##%.

     The watermark format looks like this:

<STYLE TYPE="text/css">

BODY {background-image: url(bam.gif);
background-repeat: no-repeat;
background-position: 200px 200px;}

</STYLE>

See it in Action
You have to be using MSIE 4.0 or above to see it.
Make sure you look at the source code.

     You can also get an interesting effect if you lose the background-repeat: no-repeat; flag. The background tiles, but it's as if someone grabbed the background and pulled it down to the two pixel points.

It looks like this

Fix It

     Should the background scroll or shouldn't it? You know by now that setting the BGPROPERTIES to fix it in MSIE holds the background still while the text and such above scrolls right along. You can do that with Style Sheets, too. The flag looks like this:

background-attachment: fixed;

     ...and again, it only works in MSIE 4.0 at the moment. You can also set it to "scroll" but you get that effect anyway as a default, so if you want the background to scroll, do nothing. You can do that, can't you?
     Here's the fixed attribute as part of the watermark:

<STYLE TYPE="text/css">

BODY {background-image: url(bam.gif);
background-repeat: no-repeat;
background-position: 200px 200px;
background-attachment: fixed;}

</STYLE>

It looks like this
You have to be using MSIE 4.0 or better.
Look at the source code.

That's That

     Great stuff those Style Sheets. They're very helpful if the person looking at the page has the correct type and version for the flag. Now here's the catch: Believe it or not, a lot of people don't. So don't go nuts with these background tricks quite yet. Or if you do, make sure those who are looking have the right equipment. If not, they don't get the effect. They don't see the page. They don't come back. The world ends. We all fall away into the abyss.

     Well, maybe it's not that bad, but it's close. Go easy on the Style Sheets.

 

Enjoy!

 

[Background Colors]
[Backgrounds Behind Words]
[Background Text Images]
[Full and Partial Page Backgrounds]
[Background-Repeat]
[Positioning a Background: The Watermark]
[Fix It]

Back to the HTML Home Page