1

I have this CSS code:

.overlay {
    background:#666666;
    opacity:0.7;
    filter: alpha(opacity=70);
    position:fixed;
    width:100%;
    height:100%;
    text-align:center;
    top:0px;
    left:0px;
    z-index:1000;
}

which makes my div fit the whole page and is opaque

here is my html:

<div id="overlay" class="overlay">
     <img src="http://www.example.com/images/loading.gif" alt="Loading" width="25%" style="margin-top:5%;" />
     <br />
     <h1>Loading...</h1>
</div>

how can i keep the css as it is but make my image and text within the div not opaque at all?

http://jsfiddle.net/4rvrt/

Cœur
  • 37,241
  • 25
  • 195
  • 267
  • I don't understand what you mean by "not opaque at all". Are you saying you want the background to be transparent but the img and h1 to be completly opaque (not see through at all)? Or are you really saying you want the img and h1 to be completely transparent? – Barbara Laird Dec 17 '13 at 00:45
  • 2
    Opacity on a parent will affect all children. Try using alpha transparency: `background: rgba(0,0,0,0.4);` – davidpauljunior Dec 17 '13 at 00:46

1 Answers1

0

As davidpauljunior suggest you will have to remove the explicit declaration of opacity in your css and do background:rgba(0,0,0,0.4); in the css to give only the background div lower opacity. In your example the img and header are a child of the background div and therefore will have the same explicit opacity as the background div and will show grey instead of black. For the gif to have a transparent background instead of white you have to make sure the gif itself has a transparent background when saved and I recommend putting it on a higher z-index as well so its alpha channel cannot interfere with the backgrounds' div alpha.

Tomcent
  • 11
  • 5