Friday, March 29, 2024

Style Sheets 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]

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

background2.gif


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:

bg image

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-repeatonly displays the background image once.
  • repeat-xdisplays the background image horizontally.
  • repeat-ydisplays the background image vertically.


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

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured