How to Create a Single Image CSS3 Background - dummies

How to Create a Single Image CSS3 Background

By John Paul Mueller

The simplest, most compatible way to create a CSS3 background that has at least a little pizzazz is to use a single image. The right image says a lot about your site and provides continuity between pages. Because this approach is standard, you see it used on a lot of sites. All you really need to know to use it is the background-image property, as shown in the following procedure.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
    <html>
    <head>
     <title>A Single Image Background</title>
     <link rel="stylesheet"
      href="SingleImage.CSS" />
    </head>
    <body>
     <h1>The Cute Cat</h1>
     <p>A page that has a cute cat as a background.</p>
    </body>
    </html>
  3. Save the file as SingleImage.HTML.

    The sample will appear in other locations, so naming is important.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

    body
    {
     background-image: url("CuteCat.jpg");
     background-color: SaddleBrown;
     color: SeaGreen;
     font-size: x-large;
     text-shadow: 1px 1px Yellow;
    }

    This is the simplest form of a single background image. The background-image property has a single url() function associated with it. Just in case the user can’t display the image (or chooses not to), you need to set an appropriate background color.

    Depending on the image (the example uses one that’s particularly hard to work with when it comes to text), you may need to set the text color and size to make the content easy to read.

    This is one place where using the text-shadow property may make the difference between user joy and user complaints. Use contrasting colors for the font and shadow so that the two work together to make the content viewable against an image with a range of colors.

  6. Save the file as SingleImage.CSS.

    The sample will appear in other locations, so naming is important.

  7. Load the SingleImage page.

    You see the background. Notice that the graphic starts in the upper-left corner and automatically repeats as needed to fill the entire window.

    image0.jpg