LESSON 3 - Putting A Background Color or Graphic On Your Page.

In this lesson you will learn how to put a:

on your page.

To put a background color or graphic on your page you will have to use the HTML TAG, <body attributes>. Remember the word, ATTRIBUTES? It means that this tag will have some things used with it and it will not used just by itself.

Ok, what attributes does <body> have? Well, it actually has at least eight attributes but for now (and probably for a long time) we only have to be concerned with two to them:

Putting A Background Color On Your Page

First, each color has a six digit hexadecimal code associated with it which you can see at my color help page. RED is denoted by the code, CC0000. Yellow has the code FFFF00.

Suppose we want to put a Yellow background on our page. Then we would replace the current <body> tag in myfirstpage.htm with <body bgcolor="#FFFF00">, where bgcolor means the background color. Then our HTML code would look like this:

Save the page and then display the page:

Pretty simple isn't it! But what about a graphic as a background?

Putting A Background Graphic On Your Page

Any graphic you use on a web page will normally tile, i.e. repeat itself both horizontally and vertically to fill up the screen. So you have to be careful what graphics you use for your background. Some graphics are specially made so as to tile in a nice pattern. For example, the graphic on the right has been made to tile in a geometric pattern which you can see by Clicking Here.

For our sample page, let's use this graphic, whitebg.jpg, as a background.

<== Right click and save this background and save it to the same folder on your hard drive where you are saving your test html file for this tutorial.

If you are interested in using a border background, then please take a quick break and see how you can use the border background above by going to Using A Border Background.

Now add the attribute, background to the <body> tag like this:

<body bcolor="#FFFF00" background="whitebg.jpg">

So, your file, myfirstpage.htm, should now look like this:

and if you display the file now it will look like this:

Again, really simple. But wait! What happened to the BGCOLOR? Nothing, it is still there but the BACKGROUND attribute OVERRIDES it so we don't see the background color, rather just the background graphic.

If you want to use a background that has a left border then it should be at least 1200 pixels wide. For example, click on and SAVE AS this graphic,

which is named florial.gif. Note: this graphic is 1280X80 pixels so that it will tile properly on any page that is less than 1200 pixels wide.

TO REVIEW
<body> is used to change the background color or add a graphic to the background of your page. The HTML TAG attributes used to do this are: BGCOLOR and BACKGROUND. The tag would look like this:

<body bgcolor="#XXXXXX" background="filename">

where:

  • XXXXXX is a color hexidecimal code like CC0000
  • filename is the name of a graphic file, e.g. celticgreenbackground.gif.

 

Now that you have some TEXT on your page and a graphical background you will want to have paragraphs.