Logo 1 Logo 2

HTML Code Examples Index
1. HTML Page Layout Basics 2. Creating HTML Hyperlinks 3. Creating HTML Tables
4. Font/Text Types & Colors 5. Working With HTML Images 6. Creating HTML Lists
7. Working With Backgrounds 8. Importing JavaScript Files 9. Importing CSS Files

HTML Background, A First Look

In this section I'm going to show you how to use HTML backgrounds. You can add a background to almost to anything you create in HTML however for now we will focus on using it on your website as a whole.

1. Using A Background Color

You can add any color to your background using the color's name or its hex code.

Lets take a look at the example below:

<body bgcolor="red">        *** By adding the "bgcolor" element to your
                                body tag, means that your whole website's 
                                background color will be red, it can also 
                                be any other color. 

All Your Content Goes Here!

</body>

Using the "bgcolor" attribute you can add any color you want to your website, keep in mind that since we used this in the "body" starting tag means that your whole website's background color will be that color you selected.

You can create other elements such as "div" and "table" and use different background color for each, but you will have to define that within each tag, and they define a bit differently than the above code, since we could use CSS in this case.


2. Using A Background Image

Now we take a look at how we create a background but instead of using a color, we are going to use an image.

The code to achieve this is similar to the above, however we use the attribute "background" followed by the image location instead of "bgcolor".

Examine the code below:

<body background="myImage.jpg"> *** By adding the "background" element to 
                                your body tag, means that your whole 
                                website's background will be covered by 
                                this image.

All Your Content Goes Here!

</body>

The best part about using an image for your background is that you do not have to have the image located on your own server even though it is recommended.

This means that you can simply enter the URL address of any image you find on the net (But be careful of copyrights) as the image location and it will work.

I recommend that you have all your images uploaded on your server that way you don't need to load anything else from any other website which will result in faster site loads.
Did You Like This Page? Please Share :D


Sayed
Hi, my name is Sayed, currently studying Computer Science at York University Toronto. I love creating websites and programming.
You can find me on Google+

Connect With Me:

This Site Is Hosted On:

Subscribe to my NewsLetter!
* indicates required