To start we need two images. Photographs, squares, any image. It can be a .gif, .jpg, .png, or any other type of image you might have readily available.

If you don't have a spare image or photograph we have a bunch of spare squares you can use.

Does Opacity work in all browsers?

Yes. Opacity works in current versions of IE, Firefox, and Opera. It's part of CSS3 but it works in every browser we have tested.

Double Opacity Overlay
Cool. That was a mistake gone right. The original intent was to use CSS3 Opacity to overlay the word mistake over an image. Like this.

example

Instead, we laid a plain .gif image over a .jpg image with opacity applied to the .gif and to the text. A double overlay.

Any two images or photographs will work. The file type doesn't matter. The width and height of the image doesn't matter. To use this code insert your own image names where we have scribblelogo.jpg and 20ways.gif You can use the actual width and height of your image if you want but it isn't necessary since the image is just a background. It's kind of fun to plug in random images and find some cool effect. Since the images are backgrounds they will automatically take off part of the image or repeat the image to fill the extra space. Try it.

Your Logo Here 1

Your Logo Here 2

Your Logo Here 3

Your Logo Here 4

Your Logo Here 5

Your Logo Here 6

Your Logo Here 7 Opacity 70

Opacity 70 says show 70% of our text and calla.jpg image.

We want to see 30% of the background image named backyard5.jpg.

Calla

backyard5.jpg

Transparent .gif

This one with galleryhead.gif must be a transparent .gif image. It's an interesting effect. Not what we expected but interesting.

backyard5.jpg

galleryhead.gif

We added the background color black here

Your Logo Here 8

Your Logo Here 9

Your Logo Here 10

Link URL   Last Updated: Friday, May 05, 2006