Question

I’m certainly no CSS guru, but I am working on a problem where I’d like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can’t just drag/drop them on your desktop. Basically, I had a bunch of markup like this:

<img width="400" src="my image.png" class="foo" alt="foo">

Instead, I decided to put this into a background image and change the element to a div:

<div width="400" class="foo">

The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn’t have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:

This doesn’t work

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  /* height: 200px; */
}

This sorta does:

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  height: 200px; 
}

The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won’t do it. If I can get this div to behave exactly like the img tag did, the problem is solved.

Answer 1

If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it’s own div with position: relative. Add another div inside that relative div that has the following style:

div.img_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 9999; /* or anything higher than your img's z-index */
}

That will cover up the image with a transparent div.

That way the image (which is part of your content) is still syntactically correct in the html.

Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.