Image obfuscation

I have a web page wherein there is an image (background image of the page). I do not want the user to access the image directly by finding its location from the html source. How do I do that?

Also, I'm adding a barebone CSS for media= print. while doing a SAVE AS, I'm assuming the image will not be saved?

** I know th开发者_高级运维ere are ways to get the image if someone is really intent on it, but I want to make it difficult.

Edit: I stumbled on this page - http://www.answerjam.com/privacy-policy - I would like to protect my image the same way they've done with their footer image.

There are a few different ways of protecting the image:

• Use Javascript and override the right-click context menu (see this doc for a super easy way of doing it). However, all a user has to do is disable Javascript to get their hands on it.
• Use a server-side language to check things like HTTP_REFERRER in your header and use a script to server the image (checking that field). Using a server-side language, you could also employ tricks like using GET parameters.

Having said all this, all that someone needs to do to get your image is use Firebug (or Chrome/Chromium) to check out the net tab to see downloaded content or visit their browser's cache. You could try to set your Cache-Control to no-cache when serving the image, but AFAIK, most browsers don't actually implement that for this purpose.

At the end of the day, trying to protect your images from anyone is much more of a headache than it's worth, when dealing with anyone but your grandmother visiting your site with IE6.

One way to do this that works well without JavaScript (so the site is still functional) is to use CSS to place a completely transparent PNG over the image you are protecting. If you try to right-click and save it, you'll end up saving the transparent image. The PNG can be a simple 1x1 image, and stretched to cover it.

<div class="imageContainer">
    <img src="..." class="realImage" width="100" height="50"/>
    <img src="/img/blank.png" class="blockImage" width="100" height="50"/>
</div>

CSS:

.imageContainer {
    position: relative;
}
.imageContainer .blockImage {
    position: absolute;
    top: 0;
    left: 0;
}

Of course, this still doesn't help at all if you have dev tools, but it eliminates right-click access without relying on JS or complicated tricks. It's also rather hard to get around without looking at the source.

You can combined this with the other examples.

It's still extremely easy to get around. I feel that needs to be restated a few dozen more times. Basic rule of internet content: if I can see it, I can copy it. (Like the "analog" hole - I can just screen-cap the browser.)

If you want to avoid standard visitors to see you're image directly, you can load it in javascript. Anyway, I assume that for visitors using firebug or any dev tool you just can't prevent it.

For example, to load your image with jQuery :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('body').css('background-image', 'url(your_image.png)');
});
</script>