Background Colors

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 tutorial, you know that color backgrounds really start to shinewhen 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(siin hall toon):>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 background2.gif and it is in the same directory as the page that will be using it so there's no need for subdirectories:

ALLJÄRGNEVA TEKSTI TAUST ON SAMA MIS EENENAV PILDIL.

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.

Täidab antud piltidega kogu lehe.

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.
Vasakus nurgas ainult pilt.gif
repeat-x displays the background image horizontally.
Ülemine rida piltidega täidetud
repeat-y displays the background image vertically.
Vasak serv piltidega täidetud.

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

üksik pilt lehel

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.

Terve leht on piltidega täidetud (nagu vesimärgid)

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

Tekst on scrollitav aga pilt jääb paigale sinna kuhu ta on paigutatud- taustana.

Can I Set Other Styles?

(Teksti asetus brauserivaates- vasakpoolse positsioneeringuga, üherealisena.)

Sure, you can set just about any style command that works on text. Just make sure that if you set the font size higher that you give the division enough space to house it. Here's an example where I've used as many text-based style commands as I could find before it got boring. The code looked like this:

…sama tekst, kui vasaku joondusena:

The COLSPAN Command

Here's a simple table that uses the COLSPAN command:

This Goes Across the Top!
Cell
/
Cell
/
Cell

See how the top row spans across three columns? That's what the command does. It really isn't that tough to do, the problem comes in figuring out where the <TR> commands go. You see, if you place a TR in the wrong place, you can mess up the complete configuration of the table. Here's the program that created the table above:

<TR>
<TD ALIGN="center" COLSPAN="3">This Goes Across the Top!</TD>
</TR>

The ROWSPAN Command

My guess is that you can just about guess what is going to happen here. Basically the same thing as above, but the command spans rows rather than columns. Here's an example:

How
about
this? /
Cell
Cell

Here's what made it:

<TABLE BORDER=3 width=340 CELLSPACING=3 CELLPADDING=3>
<TR>
<TD ROWSPAN="2" ALIGN=center WIDTH="200">How about this?</TD>
<TD ALIGN=center WIDTH="200">Cell</TD>
</TR>
<TR>
<TD ALIGN=center WIDTH="200">Cell</TD>
</TR>
</TABLE> Here's a quick example:

2nd Table / 2nd Table
2nd Table / 2nd Table
/ The cell next to this one has a smaller table inside of it, a table inside a table.

How It's Done

Below is the code that created the table above. I have left the text black. The outer table's commands are purple and the inner table's commands are red so you can quickly tell them apart.

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3">
<TD>2nd Table</TD>
<TD>2nd Table</TD>
<TR>
<TD>2nd Table</TD>
<TD>2nd Table</TD>
</TR>
</TABLE>

</TD>
<TD> The cell next to this one has a smaller table inside of it, a table inside a table.</TD>
</TABLE>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

You want a table? Okay, here's a table of the Brady family. Feel free to sing.

The Bradys
Marcia / Carol / Greg
Jan / Alice / Peter
Cindy / Mike / Bobby

Hey! That's not what I wanted!Yes, it is. You asked for a table. The thing above was made using the <TABLE> and </TABLE> commands. That's a table because... Oh, wait -- I'll bet this is the thing you were looking for:

The Bradys
Marcia / Carol / Greg
Jan / Alice / Peter
Cindy / Mike / Bobby

Am I right? You wanted those fancy border lines in the process so it looks like a graph or, dare I say, A TABLE?

Simple Table CommandsFirst things first. Let me explain the first table I showed you. The one you didn't want. It will make explaining the bordered table a whole lot easier. Here's the little program I wrote to give me the Brady family table:

<TABLE>
<CAPTION>The Bradys</CAPTION>
<TR>
<TD> Marcia </TD>
<TD> Carol </TD>
<TD> Greg </TD>
</TR>
<TR>
<TD> Jan </TD>
<TD> Alice </TD>
<TD> Peter </TD>
</TR>
<TR>
<TD> Cindy </TD>
<TD> Mike </TD>
<TD>Bobby </TD>
</TR>
</TABLE>

Now, don't be put off by this little ditty. It looks rough, but look again. There are really only four commands being used again and again. Here's what we use:

<TABLE> starts and ends the entire thing. I think that makes perfect sense. This is a table after all.
<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered. Okay, it's a pretty dull caption. Use it if you'd like or feel free to forget it right here. I just thought I'd show it to you. Heck, you're here aren't you?
<TR> is used when you want a new Table Row to begin.
Notice that you need to end every table row with an </TR>. See that above?
<TD> denotes Table Data. You put this in front of every piece of information you want in a cell.
You need to end every one that you open with an </TD>. See how I have that above?
</TABLE> ends the whole deal.

It used to be that all of the end TD and end TR commands were not needed. Now they are. With the advent of version 4.0 browsers and HTML 4.0 specs, tables will be rendered incorrectly in Netscape browsers if the end commands are not used. I learned that the hard way when my tables all looked like heck when I upgraded.

Really Fancy Table Stuff

Now on to making the fancy lines between cells. Here, again, is that table above:

The Bradys
Agnes / Wilma / George
Gwen / Skippy / Alvin
Harry / Melvin / Joe

Okay, so I changed the names, but you get the idea. Below is the program I used to post this deal. Please note that the commands are the same! All I did was add a few things inside of them.

<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">
<CAPTION>The Bradys</CAPTION>
<TR> <TD ALIGN = "center"> Agnes </TD>
<TD ALIGN = "center"> Wilma </TD>
<TD ALIGN = "center"> George </TD>
</TR>
<TR>
<TD ALIGN = "center"> Gwen </TD>
<TD ALIGN = "center"> Skippy </TD>
<TD ALIGN = "center"> Alvin </TD>
</TR>
<TR>
<TD ALIGN = "center"> Harry </TD>
<TD ALIGN = "center"> Melvin </TD>
<TD ALIGN = "center"> Joe </TD>
</TR>
</TABLE>

If it looks like all the work is done in the <TABLE> command -- it is. You are using three commands to do the work for you:

BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether.
CELLSPACING (all one word) gives the amount of space between cells. I'd keep this kind of small. Large spacing tends to defeat the purpose.
CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings. Sometimes bigger is better.

How about that new "ALIGN" deal in the <TD> command. See it? I have told the <TD> command I want the data that follows centered within the cell walls outlined in the TABLE command above. Can you do other ALIGN types? Sure. Try ALIGN="left" and ALIGN="right." Use them in combination in different cells. Set one table cell to left. Set another table cell to center. Save them -- trade them!

Activating Cells For Links

Wouldn't it be great if you could make a table with words and the words in the table were active so you could click on them? You can! See below:

CBS Home Page / NBC Home Page
My Home Page / Ford's Home Page

The commands are the same for this table except you place a link command after the <TD> command. Here's what the command for the upper left-hand cell looks like:

By the way, the BORDER, CELLSPACING, AND CELLPADDING commands are all set at 20 in the above table to give you an example of some larger numbers.

Images In Cells

Can I put images in each of the cells? You bet. Here ya go:

/ <--See?
See?--> /

All you have done is followed the TD command with an image command. Again, the command that creates the upper left-hand cell is this:

<TD ALIGN = "center">
IMG SRC="sally.gif">
</TD>

The Flags in HTML 4.0

Here are the flags and attributes we'll hit in this tutorial: Kastid on tegelikuses üksteise all.

<TD>
ABBR
AXIS
CHAR
CHAROFF
HEADERS
SCOPE
<TABLE>
BORDERCOLOR
DATAPAGESIZE
DATASRC (IE 4)
FRAME
RULES
SUMMARY
Event Handler
<TH>
ABBR
AXIS
CHAR
CHAROFF
HEADERS
SCOPE
<THEAD>
ALIGN
CHAR
CHAROFF
VALIGN
/ <TFOOT>
ALIGN
CHAR
CHAROFF
VALIGN
<TR>
ALIGN
CHAR
CHAROFF
BGCOLOR
VALIGN
<COLGROUP>
ALIGN
CHAR
CHAROFF
SPAN
VALIGN
WIDTH
<TBODY>
ALIGN
CHAR
CHAROFF

In order to demonstrate each of these commands, we'll work with this very simple table format:

The <TABLE> Flag

The TABLE flag begins the process of building a table. It already carries a long list of attributes, including BORDER CELLPADDING, CELLSPACING, WIDTH, and ALIGN. Here we'll look at some of the new HTML 4.0 attributes.

BORDERCOLOR

This command was first supported by Netscape Navigator (NN) version 4 and Microsoft's Internet Explorer (IE) version 3, but has just now been made standard by the World Wide Web Consortium (W3C) in HTML 4.0.

Here's what it looks like. I added the BORDER="3" to have something to color:

...and here's the effect: