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] 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.jpgReferencing 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.pngReferencing 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.
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 AuthorSocial security policy changes impact retiree benefits
Rashan Dixon May 2, 2024 5:43 PMFinancial anxiety rises among US adults, says AARP study
Noah Nguyen May 2, 2024 5:01 PMGame Pass refreshes library with exciting additions
Johannah Lopez May 2, 2024 3:25 PMGoogle’s pixel 8 pro adopts minimalistic camera finish
Johannah Lopez May 2, 2024 1:48 PMApple’s new Beats Solo Buds offer affordable audio quality
Rashan Dixon May 2, 2024 1:23 PMDouble social security payments expected certain months
April Isaacs May 2, 2024 11:57 AMMarket anticipates Federal Reserve’s rate decision
Rashan Dixon May 2, 2024 11:29 AMBitcoin remains sturdy amid crypto market turbulence
Johannah Lopez May 2, 2024 8:09 AMBinance founder sentenced to prison, steps down as CEO
Noah Nguyen May 2, 2024 7:10 AMU.S. stock futures dip, challenging market optimism
Rashan Dixon May 1, 2024 5:20 PMInadequate information delays necessary assistance
Johannah Lopez May 1, 2024 5:15 PMJune’s social security payments released early
April Isaacs May 1, 2024 3:30 PMFinancial instability grows among aging Americans
Johannah Lopez May 1, 2024 3:27 PMGoogle improves split-screen mode for Pixel devices
Cameron Wiggins May 1, 2024 11:52 AMApple AirPods Pro now at lowest price on Amazon
April Isaacs May 1, 2024 11:44 AMHSBC’s CEO Noel Quinn set to depart
Rashan Dixon May 1, 2024 11:39 AMLeaked designs hint at unique iPhone 16 features
April Isaacs May 1, 2024 11:13 AMYen’s value drops, stirs global market concerns
Johannah Lopez May 1, 2024 7:26 AMBoost your business empowers small enterprises
Rashan Dixon April 30, 2024 5:40 PMOil prices drop amidst easing Middle East tensions
Rashan Dixon April 30, 2024 5:26 PMNational Small Business Week celebrates resilience and innovation
April Isaacs April 30, 2024 5:16 PMHow to Create and Deploy QR Codes Online: A Comprehensive Guide
Rashan Dixon April 30, 2024 5:04 PMCircle fintech firm announces major changes, resumes stablecoin use
Cameron Wiggins April 30, 2024 3:06 PMBeauty mogul Jackie Aina shares Forvr Mood entrepreneurial insights
Rashan Dixon April 30, 2024 1:28 PMFrom cart to cafes: Nitro Bar’s inspiring journey
Cameron Wiggins April 30, 2024 11:40 AM