Note: this article has been updated by HTMLGoodies staff in June of 2006.

Unless you've been living under a rock for the last year, you've heard about the MySpace community. MySpace provides members with a basic page where they can let others know about their favorite interests, likes, dislikes, etc. Members have found ways to use background images on their pages, along with special text and color styles...all with Cascading Style Sheets. Read on to find out how you can customize your own pages using CSS!

In an effort to give the people what they want, here's a look at backgrounds at the HTML 4.01 level,
style sheets 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 Cascading Style Sheets. Now, if the term "Style Sheets" is Greek to you, you should read my basic
Style Sheet tutorial first or you're going to get mighty lost.

How To Use CSS on MySpace

In order to use CSS on your MySpace pages, you'll need to log into your MySpace account, and click "Edit Profile". Once you're there, you'll add your style sheet info right below the text you added to your About Me section. By adding it there, the style sheet will be applied to your MySpace Profile!

Let's Get To It!

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> tags:

<STYLE TYPE="text/css">

BODY {background-color: #FFFFFF;}

</STYLE>

Then in your document you simply write the tag <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 puttingclass="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 tag 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>tag.

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 tag you are using, you can put CLASS="blue" inside of any tag and the blue background will pop up.

But how do you get that class without affecting the text with a bold tag or the like. You should forgoe the FONT tag and use the HTML 4.01
tag SPAN. SPAN offers that wonderful tool tip through the use of a TITLE attribute tag that you cannot get through the FONT tag. Here's what they both look like:

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

Of course, you also use the background to go behind an entire paragraph by putting the CLASS tag inside the <P> tag. Then you'll need to use the </P> tag 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> tag 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> tag 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" tag to the <BODY> tag. 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 tags 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> tag. So it is best if we now follow
the <STYLE TYPE="text/css"> style tags </STYLE> in the <HEAD> tags format. We'll start with the format above. Remember, I've placed the Style Sheet commands above in the page's <HEAD> tags. Then all I did was use one <BODY> tag. The Style Sheet commands did the rest.

Positioning a Background: The Watermark

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 tag:

background-position: ##px ##px;

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

NOTE: If you're using MySpace, you'll want to pay attention to the background-position part of this style sheet--by changing the 200px 200px to other numbers (a lesser number is up, a greater number is down, etc.), you can move your background up or down, left or right on your page. The tools and generators that many folks use to create their MySpace backgrounds don't position the images correctly on the page, so you can use this to adjust those settings!

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

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 tag looks like this:

background-attachment: fixed;

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:

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 tag. 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.