CODEWITHSUNDEEP
csstransparencybackground-image
Andrew
Andrew

Reputation: 10033

Make a background image transparent using CSS

I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.

I know how to apply transparency to background colours and block level elements but can you do this for a background image?

Upvotes: 6

Views: 17988

Answers (3)

derekerdmann
derekerdmann

Reputation: 18252

Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.

The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.

Here's a sample of how this approach would work:

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }
  
<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

Upvotes: 4

Sam
Sam

Reputation: 1243

IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.

Upvotes: 1

Alex
Alex

Reputation: 7374

No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.

You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!

Upvotes: 1

Related Questions