How to Design Backgrounds in CSS3 - dummies

How to Design Backgrounds in CSS3

By John Paul Mueller

Most pages you look at have some sort of background. The following procedure shows how to add a background using CSS3, which you can use to make your web page look more appealing to a visitor.

  1. Create the ExternalCSS.HTML and ExternalCSS.CSS files and copy them to a new folder.

  2. Create or obtain a background image in Joint Photographic Experts Group (JPEG) format and name it Background.JPG.

  3. Open ExternalCSS.CSS.

  4. Type the following code after the existing styles and save the changes to disk.

     background-image: url("Background.JPG");
     background-size: 100%;
     background-repeat: no-repeat;

    The most common place to book background images is in the <body>. However, nothing prevents you from using backgrounds in other objects and in various other ways.

    The starting point for most backgrounds is the background-image property where you can specify the image you want to use with the url() method. It’s possible to add multiple images to the background. If you do so, the browser combines the images into a single presentation.

    The use of the background-size property determines how large the image appears onscreen. The example is a large picture, so you want it to take up the entire display area. Using 100% as the value means that the image automatically resizes to take up the entire client area.

    You use the background-repeat property to determine whether the image repeats in the background. It’s common for small images to repeat so they take up the entire display area. Repeating a large image tends to make the background look confusing and detract from the overall appearance of the display.

  5. Reload the test page.

    You see the effect of making the style change.


  6. Resize the browser window.

    You see that the background image automatically resizes to take up the entire display area.