Hi Guys,
I am currently working on my first ‘responsive’ website, and the client doesn’t want the images on his website to be available for people to steal/download.
I am aware that there is no fool-proof way of doing this and came across this article (http://skinnyartist.com/how-to-shrink-wrap-your-images) that covers a shrink wrapping method. The example used in this solution is with tables, however I am not using tables. So what I am wondering is is there a way of ‘shrink wrapping’ an image in a responsive design? Or am I best to use background images inside a div? I know this is not ideal - but thought I would throw it out there to see what other peoples thoughts/opinions might be.
Of course, the only way to protect images is not to put them online in the first place. But if you are going to serve them up as background images, then I don’t see the point of placing a transparent image over the top of them (unless it’s to fool people into think they are downloading what they want … but unless they are tech savvy, most people will give up after failing to download the bg image).
The problem with bg images is that they normally don’t scale … unless you use the new CSS3 background properties, though they don’t work in all browsers yet.
You could put the image inside a div that is position:relative and then have a second div that is position:absolute positioned directly over the relative one containing the transparent image.