November 21, 2009

Hot Topics:

So, You Want Info On... CSS and Backgrounds, Huh?

June 24, 1999
By Joe Burns

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 e-mail that comes into HTML Goodies runs in topic spurts. One month everyone will want to know about JavaScript. The next all the letters want information 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 ( So, You Want Cascading Style Sheets, Huh?) and all. And I think it's great. I've only written a couple of background tutorials, and my first background tutorial was one of the original HTML Goodies tutorials. So, it's been a while.

Before delving into this tutorial, 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 So, You Want Cascading Style Sheets, Huh? tutorial first or you're going to get mighty lost.

I'm going to follow the same basic format as my first background tutorial. After all, it's withstood five 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 So, You Want Positioning, Huh? tutorial, 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 ( So, You Want CSS Classes and IDs, Huh? ):

<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 ( So, You Want a Background, Huh? ). 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>

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 background2.gif and it is in the same directory as the page that will be using it so there's no need for subdirectories:

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(background2.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(background.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:

It's a simple black and white image that was run through PaintShop Pro's emboss filter.

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(background.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:

no-repeat only displays the background image once.

See it in action
Make sure to look at the source code.
repeat-x displays the background image horizontally.
- See it in action
  Make sure to look at the source code.
repeat-y displays the background image vertically.
- See it in action
  Make sure to look at the source code.

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(background.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(background.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!