devxlogo

Using Graphics

Using Graphics

Why Trust Us

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:

    flame

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

    Alice and Sophie

    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.

    background sampleHere’s an example of a page background that uses the background well—see how it adds a little flavor without getting in the way.
    background sampleHere’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:

    NamePhoneEmail
    Sue Z. Queue716 555-1212[email protected]
    George Washington212 555-9876[email protected]
    James Brown321 555-7777[email protected]

And here’s the actual background image:

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

NamePhoneEmailSue Z. Queue716 555-1212[email protected]George Washington212 555-9876[email protected]James Brown321 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.

devxblackblue

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.

About Our Journalist

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.
View Author
Show More