Adding Background Images @ OWDC

LESSON 1-06-02: Adding Background Images

Web Design Lessons > Lesson 1-06-02: Adding Background Images

Previous Lesson | Lesson Index | Next Lesson

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.

Right Click On This Image And Select 'Save Picture As...'

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:

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>
<body>

<table background="bg.jpg" border="1">
<tr>
<td>
Online Web Design Course is cool, isn't it?
</td>
</tr>
</table>

</body>
</html>

The above HTML code produces a table with a background image. I've also added a border attribute to make our table more appearent:

Online Web Design Course is cool, isn't it?

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: 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.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration

• Lesson 1-06-01 Changing background colors

• Lesson 1-06-02 Adding background images

• Lesson 1-06-03 Background - foreground conflicts
• Lesson 1-07 Images
• Lesson 1-08 Hyperlinking

Back To Top

BACKGROUND ALTERATION!

HTML Document Background Images

HTML Table Background Images