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 decrease its opacity. Essentially, I'd like something with an effect like the solid color rgba.

I've tried placing the background in a div with a negative bottom margin top pull the content over it:

<div style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div>
<!-- page content -->

However, it seems hackish and only partially works. It's exactly what I want until opacity is thrown in there; it puts the div on top. (How does opacity affect layering!?)

I considered position: absolute for the background div and the content so I could play with the z-index but that breaks the template this is all in.

How do I get this image to be a translucent background?

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!