back to the blog page

Image Protection Using CSS

Method #1

Using the image in the background style of a div with a span (#cover) overlaying a trans gif on top.

Method #2

Same as method #1 but with all the styles in the sheet, not inline.

Method #3

Using a real image tag, but with a span to cover it. (I used the same code to do the fade overlays on the 'top' page images on my church site.)

a yummy big scone, hmmmmmm

Method #4

Same as method #2 but with some add-ons! There's a span for a copyright/watermark, which being text is easy to change (and can be styled). There's also a 'real' image hidden by css but is there for people with css turned off!

a yummy big scone, hmmmmmm

Thoughts...

If someone wants your images, they'll get them! None of these will stop someone who can read code/css or has firebug, but they might help to stop the 'casual' stealer.

#4 is probably the niftiest, but it's also the most complicated!