Style Sheets and Backgrounds

Quality Management ROI Calculator - Focus on Test Automation
The Rational Quality Management ROI calculator is intended to give you an idea of what return you can garner from implementing our functional testing solutions. Our quality management solutions offer tools to develop a continuous process, powered by automation to govern software delivery. »
Gartner MarketScope: Application Quality Management Solutions, 1Q 08
This Gartner MarketScope provides guidance for enterprises seeking to purchase tools to manage risk and software quality. We focus on tools fit for large-scale enterprise use and that are ready out of the box to manage quality requirements and functional testing. »
Whitepaper: Tips for Writing Good Use Cases
Writing a good use case isnt easy, but, fortunately, our experience can be your guide. The concepts and principles assembled here represent the works of many people at IBM, and they form a foundation of proven best practices. »
Whitepaper: The Role of Integrated Requirements Management in Software Delivery
Learn about the critical role integrated requirements management can play in helping ensure your business goals and IT projects are continuously aligned-whether you are sourcing, integrat-ing, building or maintaining your software. It also looks at ways that integration and automation can help ensure managing projects and the required changes can be executed using manageable processes that satisfy stakeholders and development teams. »

HTML GOODIES TO GO NEWSLETTER

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]

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 where folks can create their own little space on the web, meet friends, share stories, create blogs and join groups. MySpace provides a very basic "profile" page where members can let others know about their favorite interests, likes, dislikes, etc. Although the page they provide is useful, it's very bland. As such, members have found ways to use background images on their pages, along with special text and color styles...yup, you guessed it, all through the use of Cascading Style Sheets (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.

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

See the tags 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 tag, 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: tag 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

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: ##% ##%.

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

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

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 Goodies Home Page