Translucent background from opaque image

Question

I have a user-uploaded image (almost always a JPEG) that I\'d like to use as a background. To make it less distracting and keep the content over it legible, I\'m trying to

Answer 1

Instead of having to pull the content on top of this image, why not just add a wrapper around your content and put the image as a background of that wrapper? Then you can add a semi-transparent background to your content to make it more legible (while still being able to see the image beneath it). Try:

<div class="wrapper" style="background-image: url(example.jpg);" >
    <div class="content">
        ...
    </div>
</div>

CSS:

.wrapper { background: none 0 0 no-repeat; }
.content { background: url(transparency.png); }

Hopefully that's not too confusing!