Protecting Photos Using a Transparent GIF and a Stylesheet
Print this Article
Comment on this Article
Last Updated:
August 29, 2008 1:32 PM
When you exchange photos on the Internet, you can embed a transparent GIF over your photos using a style sheet. When someone right-clicks on the image to save it, they get a transparent GIF rather than your photo. Adobe® Photoshop®, Corel® Paint Shop Pro®, and The Gimp are several photo-editing applications that you can use to embed the GIF.
In addition to a photo-editing application, you need to know the width and height of the image and some basic HTML knowledge.
To Determine the Size of Your Image
- Open your image file.
- Right-click on the image and select Properties.
- Open the Summary tab to see the basic image properties.
- Make a note of the width and height.
To Add a Transparent GIF using Photoshop
- Open Photoshop and from the File Menu, select New.
- In the dialog box, enter the width and height of your image and click OK.
- To hide the white background of the new file, on the Layers Palette, click the eye next to Background. A white and gray checkerboard displays.
- From the File menu, select Save for Web.
- In the Save for Web box, under Image File Extension, select GIF.
- Select Transparency.
- Click Save. In the Save box, select where you want to save the file and click Save.
To Create the HTML Style Sheet
- Open an HTML or text editor.
- Enter the following code between the head tags:
<
html>
<head>
<title>Untitled Document</title>
<style>
.transparent {
background-image: url(yourimage.jpg);
}
</style>
</head>
<body>
<img src="transparent.gif" class="transparent"/>
</body>
</html>
Now, when someone attempts to right-click and save your image, they get the transparent GIF instead.