Lab 3: Expand Your World
Working with Full Image Backgrounds and Opacity
Problem: In this chapter, you worked with banner images and the CSS3 opacity property. Work
with the index07.html file in the lab3 folder and the lab3styles07.css file in the lab3\css folder from

the Data Files for Students. In this exercise, you will explore ways to apply a background image and
to work the opacity property. The complete webpage is shown in Figure 7–98.

Instructions:
1. Open index07.html in your text editor, review the page, add a title, modify the comment at the
     top of the page to include your name and today’s date, and replace “Student’s Name” with your
      name in the footer element.
2. Open the lab3styles07.css file from the lab3\css folder. Modify the comment at the top of the
    style sheet to include your name and today’s date.
3. In the lab3styles07.css file, add the following properties and values to the body style rule to
    apply a background image to an entire webpage:
      background: url(beach.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
      -moz-background-size: cover;
       -o-background-size: cover;
        background-size: cover;

4. In the lab3styles07.css file, add an opacity property and value to the header, nav, main, and
    footer elements. Use a different value for each element to view the changes in transparency.
5. Submit your answers in the format specified by your instructor.
6. In step 3, you applied a background image to the body element so that it would consume
   the entire webpage. Use your browser to research the background-size property and
   discuss other areas where this property could be applied.