Web Design 35S‎ > ‎CSS‎ > ‎

Opacity: I can see clearly now

Before you make your web site, make a rough sketch on a piece of paper to show where all the various parts of the assignment will be located. Make sure I see the sketch before you begin.
  1. When you talk about the opacity of something you talk about how see through (or opaque) it is, or how much light it lets through.
  2. For CSS purposes, something whose opacity is 1.0 is not see through at all, and something with an opacity of 0.0 is completely see through (you wouldn't notice that it's there.
  3. For this assignment you need to create a new webpage.
  4. You will also need an image.
  5. In the head of this page you're going to create a class of image like this:<style> img.bob{opacity:.05;}</style>
  6. In the body of your page, put in your image (don't forget to include its class).
  7. Load your HTML file into your browser.
  8. Your page looks a little washed out, doesn't it?
  9. Change the opacity level in your style section to 1.0, save it, and then reload your page. Then change it to 0.0. How does your image change?

What you need to do

  1. Create a webpage and find a background image suitable to the topic of you page. Make sure the image is large enough to cover most of the screen
  2. Fix the position of the image, and give it an opacity of about 0.3.
  3. Create a heading for the page.
  4. Create text based content for the page, enough so that the text can be seen to scroll while the background image does not.


A background picture with a fixed position and an opacity of about 0.3 /6
A suitable headline for your page. /1
 Title tags for your page. /1
Content suitable to the subject of your page. There should be enough so that your text will scroll. /1

James Dykstra,
Jan 22, 2013, 11:59 AM