Creating Backgrounds in your Web Pages
Killersites Newsletter Archive: March 17th, 2004
Though I'm not a student, I decided a little spring break action was in order. Of course, since I'm not in my teens, or even my twenties, Daytona Beach and 'Girls Gone Wild' type partying was just not on the agenda; it would have probably given me a heart attack anyway.
No, spring break for a middle-aged nerd means a new video game and a few more trips to the local coffee shop. Now that things have calmed down, I've found the time and energy for this newsletter.
What you need to know to take advantage of this tutorial
I am writing this article with the assumption that you know basic HTML and you know CSS, Cascading Style Sheets. If you don't, check out the tutorials I've written. They will give you the background you need to fully understand this week's newsletter.
Introduction
In the early days of the web, placing background images in/on your web pages was very limited; you could do it, but you had very little control. Then the browsers started supporting CSS properly, and whiz-bang! You could do a lot more.
Before using CSS to set backgrounds (background colors and images), you could do it in HTML (and still can, though you shouldn't) by setting an attribute in the <body> tag. Ok, now some of you are now scratching your heads and wondering: "what's an attribute?"
Definition of a tag attribute
We all know that HTML and XHTML (XHTML is basically strict HTML) is a snappy way to include information about a document right in the page itself. To be clear, let's look at an easy example, the <h1> tag. This tag is used to denote a line of text as being a 'header':
<h1>This newsletter is about backgrounds</h1>
The <h1> tag tells the browser something about the text it is wrapping; it is telling the browser that this text is important, so important that it is a header. I talk all about this on my tutorial web site www.how-to-build-websites.com .
Now that we've got that out of the way, we can talk about what a tag attribute is. In a nutshell, a tag attribute is added in a tag to extend or change what the tag actually does. Another way to look at tag attributes is that they are used to provide more details/information to the web browser about how the web browser should use the tags. This can be a little confusing so we will jump into a simple example, the <body> tag.
A basic <body> tag has to be in every web page. In its most basic form it looks like this:
<body>
</body>
Like most tags, it comes in pairs; the second of the pair (</body>) lets the browser know where the 'body' tag finishes. By the way, all the stuff that you see when you visit a web page has to be inserted in-between the body tags. Like many tags in HTML, the <body> tag has several attributes that are optional (you can use them if you want to).
Since we are talking about backgrounds in web pages, let's look at the <body> tags background attribute:
<body background="myBackground.gif">
In the above <body> tag, we are using its 'background' attribute with this line of text:
background="myBackground.gif"
This tells the browser to tile the image 'myBackground.gif' on the entire page. You have probably seen many pages with a background tile and you will probably agree it is usually a pretty ugly thing to behold. I myself have created 'beautiful' backgrounds for my web pages with pictures of fish and birds that tiled endlessly up, down and across the web page. Once I figured out that the tiled fish made it hard for anyone to read anything on the page, I smartly removed them.
Hmm... but if I only could have the background image appear on one spot in the page and have the text float on top it; well, once again, CSS comes to the rescue! CSS, once a fantasy of all web designers, has now come of age.
Using CSS to insert backgrounds into your web pages
CSS gives you much better control when it comes to inserting background images into your web pages. With CSS, not only can you insert and control how images are inserted on the main page (that is to say, the <body> tag), but you can also use CSS to insert background images in any block level tag. This is something you can't do with HTML alone.
Side Note
In HTML, tags are either 'inline' or block-level elements.
Block level HTML elements:
Block-level elements exist in their own virtual 'box' and are always followed by a carriage return (like hitting the 'enter' key after typing in some text). In other words, a block-level element breaks the flow of text and other elements to create a virtual box around itself. You can then insert images and change the color of this virtual box.
Let's look at some basic CSS that changes the background of the body tag:
<style type="text/css" media="screen">
body {
background-color:#000000;
background-attachment: fixed;
background-image: url(images/mothGreenSmall.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
</style>
The above CSS code would be inserted in between the <head> and </head> tags of your web page. If you are really confused now, don't worry; You just need a little refresher on my tutorial web site . If you can handle this so far, lets move on!
You can see in the CSS code above that I am setting all kinds of values about how the web pages' background should look and act. I won't go over every line; I think they are self-explanatory, for the most part. But I want to point out this line:
background-attachment: fixed;
This line affects what I call the 'behavior' of the image; in this case it tells the browser that the image should stay in the same spot (in this case the right bottom) even if someone should have to scroll the page. You can see a sample here:
http://www.how-to-build-websites.com/lessonTwo.htm
This creates an effect where the web page text seems to 'float' on top of the background image as we specified in the CSS code:
background-image: url(images/mothGreenSmall.jpg);
You can make it so that the image actually moves as the person scrolls the page by changing the CSS from:
background-attachment: fixed;
to
background-attachment: scroll;
Another way to use CSS in your web pages
A quick and dirty way to use CSS in your web pages is to use what is called 'inline CSS'. Here is an example of the CSS above applied directly to the <body> tag:
<body style=" background-attachment: fixed; background-image: url(images/mothGreenSmall.jpg); background-repeat: no-repeat;">
This example does not contain all the CSS attributes we have in the previous example, but it should be enough for you to get an idea of how to do it. Both ways of using CSS work fine, though you will want to use CSS in different ways, depending on your needs. Again, if you are not sure what I am talking about, check out my tutorial.
Putting background images in other HTML tags
We are getting close to finishing this newsletter (it's about time!), but before we go, let's put a background image in a <div>:
<div style=" background-attachment: fixed; background-image: url(images/mothGreenSmall.jpg); background-repeat: no-repeat;">
Some Text that will sit on top of the background image.
</div>
Since a <div> is a block level tag, you can insert a background image into it. You can also do this with <h1> tags, too:
h1 {
background-image:url(../images/BOOK_flash.jpg);
background-attachment:fixed;
background-position:right bottom;
}
Changing the background color with CSS
Inserting background images is actually the hard part of setting backgrounds in your web pages. The other type of background is a simple colored background. You can easily do this with this code:
background-color: red
So when used directly on a tag (inline):
<h1 style=" background-color: red">
My header text...
</h1>
Like a good little HTML nerd, I close my tags properly with the ending tag, in this case </h1>. You can specify colors in your CSS code with named colors (red, green, blue, etc.) and hexadecimal colors, like #000000 or #FFFFFF, and with RGB colors. I speak more at length of this in the tutorial pages.
Just remember that the first two numbers (in hexadecimal) represent the red component of the color; the second two numbers set the green aspect; and the last two numbers set the blue component of the color. Remember that color on screen is always made up of a mix of Red, Green and Blue: RGB.
Conclusion
This article doesn't cover every single thing about using backgrounds in HTML, but it does cover most of it. There are a few neat tricks I haven't mentioned because of my natural laziness; if you want me to talk about them in the next newsletter, please email me.
It's time for a little 'Jesus Juice'. :)
If you liked the article and you want to see more let me know!
Stefan Mischook.