HTML Basix - HTML tutorials and online webmaster tools


Htaccess code generators Code generators Tutorials

Online and offline code generators


Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.
Introduction  1  2  3  4  5  6  7  8  9  10  Home


Lesson 7 - Backgrounds

How to use a solid colour as a background.

To make the background of your webpage a colour other than the basic white it is now, you need to ADD it in the <body> tag (which you have already typed). The command you use is 'bgcolor', and it's written like this:

<body bgcolor="#000000">. Choose whatever colour you like for a background using the colour chart. What more can I say?


Using an image as a background...

If you want to use a picture as the background to your page, you need to use either a .gif or .jpg file. You can use a .bmp, but these are usually a lot bigger in 'size' than the .jpg or .gif. As such, your page will take a long time to load when someone visits it.



We are going to use the picture above. Right click on it, and 'save image as...''. Save it in the folder where your html file is, and make sure it's saved as clover.gif.

In your body tag, instead of typing in 'bgcolor="#000000", type in 'background="clover.gif"'. The way it looks in the tag is:
"<body background="clover.gif">".

Of course, you could keep both background colour AND background image:
"<body bgcolor="#000000" background="clover.gif">"

Save your notepad page, then refresh your html page. You will notice that whereas the picture you downloaded is a small square, when you set it as a background it 'tiles', or repeats itself until the page is full. Because of this, make sure the picture you choose as a background will look ok tiled!

To see what the background looks like, click here.

For an example of a background image that doesn't tile well....check this out!

Backgrounds done, now you can learn how to put a picture on your page in lesson 8!


Introduction  1  2  3  4  5  6  7  8  9  10  Home




Site Stats     
[an error occurred while processing this directive]
   You beaut











This site is © HTML Basix 2003 - 2009