Dan Fergus Design > Student Resources > Syllabus > Class Schedule >Transparent Background Illusion

VCB328 Advanced Web Design

Exercise: Transparent background

Currently there is no way to achieve true transparency on a web page using HTML and CSS (though there are recommended CSS rules ready and waiting that will be able to take advantage of transparency should it ever be introduced by browser manufacturers). However, we can create the illusion of a semi-transparent background with a couple of specially created images and some clever CSS usage. I have an example of the effect here. Scroll down the page and keep an eye on the background bug images.

But be warned: Explorer for Windows will not display this effect properly! (Boo!). If you have a PC, download and use Firefox. Heck, if you have a Mac, download and use Firefox!

Procedure

1. Find an image to use for a background. I'd recommend something in the 500-700 pixel range. Don't have anything handy? Try the Samples folder inside Adobe Photoshop.
2. Open your chosen image in Photoshop. Make sure it's 72dpi and no bigger than 700 pixels across. Save it for the web as a jpeg.
3. Open the Levels palette and lighten the entire image. Optional: add an effect like Distort > Glass.
4. Save this as a jpeg. make sure you use a different name.
5. Create a root folder for this exercise and place both jpegs into it. Call the folder yourName_transbackgrounds or something similar.
6. Launch Dreamweaver (or other HTML editor).
7. Create a new HTML document. Save it as transparentBackground.html.
8. Create a style sheet in the head of the document. Dreamweaver users can open the CSS window and press the "new css rule" (the plus sign) button. Create a style for the body tag . Set the background to the first image you created. Also, choose no-repeat, fixed, and position it at the top, left. The markup will look like this:

body {
background-attachment: fixed;
background-image: url(yourImageHere);
background-repeat: no-repeat;
background-position: left top;
}

9. Now it the body of your HTML document write a <div> tag and give it an id name like "window." Inside the <div> you need to put some text. Go to the Lorem Ipsum website (www.lipsum.com) and generate about 3 paragraphs worth of text. The markup will look like this:

<div id="window">
All of your Lorem Ipsum text goes here...

</div>

10. Create a style rule for the id "window." Once again, Dreamweaver users can use the "new css rule" button.
• Under Background, choose the second (lighter) picture you created. Once again set it for no-repeat, fixed, top and left.
• Still in the CSS window, under Box, set the width to 400px; give it a left-margin and a top-margin of 100px; and a padding of 10px (all four sides).
• Finally, under Border, set a 2px, solid, black border.

The CSS markup will look something like this:

#window {
background-attachment: fixed;
background-image: url(yourSecondImageHere);
background-repeat: no-repeat;
background-position: left top;
width: 400px;
margin-top: 100px;
margin-left: 100px;
padding: 10px;
border: 2px solid #000000;
}

11. Preview the page in a browser (Firefox of Safari). Scroll the page—note how the box that contains the text appears to float sem-transparently above the background. Pretty cool, huh?
12. Experiment with different sizes on the width & margins. You can also change (or remove) the border.
13. Upon completion, give me a copy of your root folder to receive full credit.

Due: Beginning of class, week 3.

Class schedule

Syllabus

Student resource index