Geek asks and answers

Transparent background from an opaque image.

I have a user-uploaded image (almost always JPEG) that I would like to use as a background. To make it less distracting and keep the content on it legible, I try to reduce its opacity. In fact, I would like something with an effect, like a solid color rgba.

I tried putting the background in a div with a negative bottom margin up, pulling the contents above it:

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

However, it seems hacky and only partially works. This is exactly what I want until I go there opacity; it puts the div on top. (How opacitydoes layering affect ??)

I considered position: absolutefor a background div and content so that I can play with z-index, but which breaks the template in which it all resides.

How to get this image as a translucent background?

+3
source share
1 answer

Instead of pulling content on top of this image, why not just add a wrapper around your content and put the image as the background of this shell? You can then add a translucent background to your content to make it clearer (while you can still see the image below 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); }

Hope this doesn't bother you too much!

+2
source

More articles:


All Articles