Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Design Backgrounds in CSS3

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.

    body
    {
     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.

    image0.jpg
  6. Resize the browser window.

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

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.