Adding Background Images
Print This Post
No CommentRelated Reading |
Online Web Design Course is going to continue by teaching you how to add a background image to your HTML documents and tables.
HTML Document Background Images
In order to actually assign a background image to an HTML document, we’re first going to need to obtain or create such an image. Fortunately, I’ll provide one here for you! Just save the below image to the same location as your web pages. Right click on the below image and select “Save Picture As…” from the menu. Then select your location and click “Save” or press “Enter” on your keyboard.
Sidenote: I’ve taken the above image from Grsites Absolute Background Textures Archive. You can find lots and lots of free web graphics on that website.
Now, we’re going to create a web page that uses the above image as a background image. Note that browsers automatically “tile” background images, so that the background becomes like a seamless texture. The HTML code is below:
| <html> <head> </head> </body> |
The “bg.jpg” value of the “background” attribute refers to the filename of our background image. If you have saved the above image with a different filename, simply change the “bg.jpg” value to your own filename. The above HTML code is going to produce the below output:
|
|
As you see, our image has been “tiled” vertically and horizontally to create a seamless texture. You can create different background effects by using different images.
HTML Table Background Images
Next in our free web design course, we’ll learn how to assign background images to HTML tables.
Assigning a background image to tables works just like assigning a background image to an HTML document. The same attribute – “background” – is used along with the <table> tag. Let us create a table with the same background image we used above:
| <html> <head> </head> <table background=”bg.jpg” border=”1″> </body> |
The above HTML code produces a table with a background image. I’ve also added a border attribute to make our table more appearent:
|
If you enjoyed this lesson, please link to it 
This lesson is over. In the next lesson of our free web design course, we’re going to learn how to avoid background – foreground conflicts.
Loading ...
Popular Tags