How to Code Transparent Pictures in HTML

Create transparent images for your website using HTML.

Using transparent images on your website enables you to create more dynamic visuals for your visitors. Creating transparent images can be done fairly easily by editing or creating images in photo-editing software programs such as Photoshop. But if you don't have access to such programs, or don't want to permanently change your images, you can code transparent pictures in HTML using CSS properties.

Instructions

1. Open the HTML source of the file that contains the coded link to the image you wish to make transparent.

2. Add the following line of code directly into the <img> tag: "style="opacity:X;filter:alpha(opacity=X)."

   Your img tag should look something like this: <img src="my-pic.jpg" width="150" height="150" alt="My picture" style="opacity:X;filter:alpha(opacity=X)" />

3. Replace the variables X with the desired number to indicate the opacity. The function "opacity:X" should be set on a 0.0-1.0 scale in which the lower value makes the image more transparent. The function "filter:alpha(opacity=X)" should be set on a 0-100 scale in which the lower value makes the image more transparent. Set these to the same value, but use both options as they work on separate browsers.

4. Save your file.

5. View your page in your browser to test the results. Adjust as needed.

References

• W3Schools.com: CSS Image Opacity / Transparency