STARIKOVS

This note is about applying a transparency or opacity for background in CSS. Notice, that it isn’t possible to set the transparency for background property specifying it in the property definition. So, you need to use some CSS trick to achieve you want.

My way to apply opacity for background:

1. Create new z-index context for the element with the background. This is a container element.

2. Add :before pseudo element for that container element. It will have a background layer with opacity property.

3. :before element should be pozitioned under any other elements in the container element. So, set z-index “-1″ for it.

4. Set a background for the :before element and stretch it to the container element.

I think that’s all. Here’s the code snippets:

1
2
3

  <div class="container">
    <p>Lorem ipsum dolor sit amet..</p>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  .container {
    position: relative;
    z-index: 0;
  }
 
  .container:before {
    background: url(bg.png);
    position: absolute;
    bottom: 0;
    content: ' ';
    left: 0;
    opacity: .5;
    right: 0;
    top: 0;
    z-index: -1;
  }

Check out this Pen!

Try it here http://codepen.io/starikovs/pen/zGugk.