By Nir


2009-03-12 09:51:09 8 Comments

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a div while the text remains opaque?

I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd love to know so I can look at their code).

5 comments

@Davy Landman 2009-03-12 10:42:11

I've created that effect on my blog Landman Code.

What I did was

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}
<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

The important thing that every padding/margin and content must be the same in both the .Background as .Foreground.

@Austin Adams 2011-01-17 20:34:05

Use rgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

@Donotello 2011-08-26 09:13:40

Is there any possibility that IE7 mode in IE9 is different from actual IE7? I'm asking because this code isn't working there. But if we use only three last rules (without background-color: rgb(0, 0, 0);) - all just fine

@robertpateii 2011-10-11 20:18:14

I tried this solution and it did not work in IE8 because IE8 correctly applies the background color. I just took out the fallback for other browsers (which is what, old versions of firefox?). Explained here: stackoverflow.com/questions/4508191/… p.s. @Donotello ie7 mode in ie9 is definitely not is 100% accurate. I use a CMS that requires IE7/8 and the compatibility mode in IE9 breaks all sorts of things in it.

@Blazemonger 2013-03-21 15:02:21

The linked article says that for IE (version 8, at least), you need to conditionally set background:transparent as well.

@brillout 2012-08-21 13:12:01

Relaxing your requirement to work on IE6 and legacy browsers you can use ::before and display: inline-block

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

Demo at http://jsfiddle.net/KVyFH/172/ ‚Äč

It will work on any modern browser

@TomSawyer 2012-12-19 14:40:29

won't work with overflow. jsfiddle.net/KVyFH/256

@Liran Brimer 2019-01-10 08:29:31

I suggest to also add to the "before" elemnt "top: 0; right:0" or it wouldn't work with padding

@Slawa 2012-10-04 20:47:42

Thanks @davy-landmann for https://stackoverflow.com/a/638064/417153. That's what I was looking for! Same effect with LESS code:

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }

@Can Berk Güder 2009-03-12 09:53:05

I use an alpha-transparent PNG for that:

div.semi-transparent {
  background: url('semi-transparent.png');
}

For IE6, you'd need to use a PNG fix (1, 2), though.

@Marcy Sutton 2012-03-09 21:27:03

Pure CSS > Background Images

@its_me 2012-05-08 13:39:23

@MarcySutton IMO not always, definitely not. If you look at the answer marked as the answer, you'd understand why. How many hours should we waste for cross-browser compatibility. So, when you absolutely can, (sure, not always) you can use background images. Like I said, JMO.

@Fabrício Matté 2012-07-10 06:41:59

The PNG fix 1 is awesome! The accept answer's method does not work on my IE6.

@Fabrício Matté 2013-11-19 15:47:43

@Crungmungus there are many JS hacks/polyfills (see links below the code in the answer) and even a CSS method to fix PNG transparency in IE6. Though, in more complex use cases they tend to break one way or another so I've gave up on IE6 PNG transparency several months ago.

Related Questions

Sponsored Content

22 Answered Questions

[SOLVED] Vertically align text next to an image?

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1524166 View
  • 2286 Score
  • 30 Answer
  • Tags:   html css opacity

47 Answered Questions

[SOLVED] How to disable text selection highlighting

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

36 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

10 Answered Questions

[SOLVED] Div width 100% minus fixed amount of pixels

  • 2009-03-16 17:14:24
  • Removed_account
  • 241939 View
  • 317 Score
  • 10 Answer
  • Tags:   html css height width

6 Answered Questions

[SOLVED] Is there a way to word-wrap long words in a div?

  • 2009-10-28 16:01:20
  • rutherford
  • 276105 View
  • 171 Score
  • 6 Answer
  • Tags:   css html word-wrap

Sponsored Content