HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

You can use the img tag to add an image to your HTML5 page, but sometimes you want to use images as a background for a specific element or for the entire page. You can use the background-image CSS rule to apply a background image to a page or elements on a page.

image0.jpg

Background images are easy to apply. The code for backgroundImage.html shows how:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>backgroundImage.html</title>
 <style type = "text/css">
  body {
  background-image: url("ropeBG.jpg");
  }
  h1 {
  background-image: url("ropeBGLight.jpg");
  }
  p {
  background-color: white;
  background-color: rgba(255, 255, 255, .85);
  }
 </style>
 </head>
 <body>
 <h1>Using Background Images</h1>
 <p>
  The heading uses a lighter version of the background,
  and the paragraph uses a solid color background with
  light transparency.
 </p>
 <p>
  The heading uses a lighter version of the background,
  and the paragraph uses a solid color background with
  light transparency.
 </p>
 </body>
</html>

Attaching the background image to an element through CSS isn't difficult. Here are the general steps:

  1. Find or create an appropriate image and place it in the same directory as the page so it's easy to find.

  2. Attach the background-image style rule to the page you want to apply the image to.

    If you want to apply the image to the entire page, use the element.

  3. Tell CSS where background-image is by adding a url identifier.

    Use the keyword url ( )to indicate that the next thing is an address.

  4. Enter the address of the image.

    It's easiest if the image is in the same directory as the page. If that's the case, you can simply type the image name. Make sure you surround the URL with quotes.

  5. Test your background image by viewing the web page in your browser.

    A lot can go wrong with background images. The image may not be in the right directory, you might have misspelled its name, or you may have forgotten the bit.

Getting a background check

It's pretty easy to add backgrounds, but background images aren't perfect. Here is a page with a nice background. Unfortunately, the text is difficult to read.

image1.jpg

Background images can add a lot of zing to your pages, but they can introduce some problems, such as

  • Background images can add to the file size. Images are very large, so a big background image can make your page much larger and harder to download.

  • Some images can make your page harder to read. An image in the background can interfere with the text, so the page can be much harder to read.

  • Good images don't make good backgrounds. A good picture draws the eye and calls attention to it. The job of a background image is to fade into the background. If you want people to look at a picture, embed it. Background images shouldn't jump into the foreground.

  • Backgrounds need to be low contrast. If your background image is dark, you can make light text viewable. If the background image is light, dark text shows up. If your image has areas of light and dark (like nearly all good images), it'll be impossible to find a text color that looks good against it.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: