Home » Using Graphics

Using Graphics

Using Images in a Web Page

nce you’ve got your image, the next step is to place it in your Web page.

The way you insert your images depends on how you are using them:

If you want the image embedded in the content of your page, use the image tag:
If you want the image to be your page’s background, use the background attribute of the body tag:
If you want the image to be a table background, use the background attribute of the table:

table row:

The image tag embeds an image in your HTML file.

To make an image appear as if it is embedded in the page, use the image tag, , at the point in your file where you want the image to appear.

For example, this image was inserted using the image tag. The image tag was used in its own paragraph, to place it on its own line:

The image tag we used looks like this. Click on it to see what each part does.

Background Images

You can use an image as the background of an entire Web page.

To use an image as a page background of a Web page, add the “background” attribute to your page’s body tag, like this:

The background attribute’s value is the URL of the image you want to use for the page background. If this image is not large enough to fill the entire page, it automatically tiles (repeats) to do so.

Don’t go overboard with your background images! Remember that people have to read the text and see the other information that appears on top of it.

Here’s an example of a page background that uses the background well—see how it adds a little flavor without getting in the way.

Here’s an example of a page background that uses the background poorly. The image was nice, but not the right choice for a background.

Check out the HTML Basics: Backgrounds and Colors tutorial for more information on adding background images and colors.

Table Background Images

To place an image in the background of a table on a Web page, use the background attribute within a table tag.

To use an image as a table, table row, or table cell background, add the “background” attribute to the appropriate table tag, like this:

The background attribute’s value is the URL of the image you want to use for the table background.
Here’s a table with a background image:

Name Phone Email

Sue Z. Queue 716 555-1212 [email protected]

George Washington 212 555-9876 [email protected]

James Brown 321 555-7777 [email protected]

Name	Phone	Email
Sue Z. Queue	716 555-1212	[email protected]
George Washington	212 555-9876	[email protected]
James Brown	321 555-7777	[email protected]

And here’s the actual background image:

Netscape Navigator’s rendering of table background images differs from that of Micrsoft Internet Explorer. Click on the options below to see an example of each.

Netscaperenders a table background by fitting the image in each cell, tiling, if necessary. The lower part of the image is cut off because it doesn’t fit in the individual cells.
Internet Explorer renders a table background by fitting/tiling the image in the entire table. The full image is tiled to fit the entire table area.

You should definitely keep this in mind when creating table backgrounds. And remember: Always view your pages in Netscape and Internet Explorer!

Check out the Project Cool Tables tutorial for more information on making tables.

Row and Cell Background Images

To place an image in the background of a table or a cell, use the background attribute within the tr, th, or td tag.

To use an image as a table row, or table cell background, add the “background” attribute to the appropriate tr, th, or td tag, like this:

The background attribute’s value is the URL of the image you want to use for the table background.

Here’s a table that contains one row and two cells with background images. click on the table title to see the code that created it.

If you have Navigator you will see the row effect. If you have IE, you will not. In this case, Navigator 4X supports the background attribute for table rows, but IE 5X does not. Cells are handled identically in both browsers.

Names & Numbers

NamePhoneEmail

Sue Z. Queue

716 555-1212

[email protected]

George Washington

212 555-9876

[email protected]

James Brown

321 555-7777

[email protected]

Check out the Project Cool Tables tutorial for more information on making tables.

Storing Image Files

Just as you do with .html files, you need to have a logical file structure for saving and calling your image files, as well as a logical naming convention for the files.

The images themselves aren’t actually placed in the .html file that displays them. Instead the file will call the images by name. The names can include either a full, exact path, or a relative path.

File Hierarchy

There are no hard-and-fast rules for file structure; HTML is flexible enough to accommodate many different storage schemes. But we heartily recommend the following simple approach:

If all of your site’s HTML files reside in one directory, and if you have just a handful of image files, store your HTML files and image files in the same directory:
www
  home
    index.html
    logo.gif
    photo.jpg

Referencing image files in the above directory setup is simple. For example, to reference logo.gif from index.html, you would enter: .

For any other situation than the above, store all of your image files in a separate image directory:
www
  home
    index.html
  page1>
    page1.html
    links1.html
  images
    logo.gif
    photo.jpg
    thing.png

Referencing image files in the above directory setup is just a tad more subtle. To reference logo.gif from page1.html, you would enter: .

The .. moves you up one level, from page1 to www. Then, the /images/ moves down from www to the images directory.

Image-File Naming Guidelines

There are no etched-in-stone rules for naming image files. But here are some useful guidelines:

Use the 8.3 naming convention. That is, limit the first part of your filename to a maximum of 8 characters and append to this a 3-character extension. For example: myimage.gif, a.jpg, alleight.png, etc. These are all 8.3 no-nos: mycoolimage.gif, a.jpeg, all_eight.png.
Why? Because some of your users might be on platforms that do not support long filenames (Windows 3.x, for example).
Use all lowercase letters.
Why? Because some servers (UNIX, for example) are filename case-sensitive and it’s all too easy to make an upper/lower-case mistake when entering a filename in your HTML docs.
Do not use spaces or punctuation marks, except for underscores _ and dashes – .
Why? Because some servers might have trouble decoding these special characters.

Charlie Frank

Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.