By Stijn Sanders


2009-04-30 09:00:02 8 Comments

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?

I'd like to accomplish this without having the text and the background as two separate elements.

When trying:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

It looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.

28 comments

@Vinod Kumar 2018-12-12 07:29:47

As per my point of view, the best way to use a background color with opacity is as below. If we use this, then we will not lose opacity for the other elements, like test color, border, etc.

background-color: rgba(71, 158, 0, 0.8);

Use background color with opacity

background-color: rgba(R, G, B, Opacity);

Enter image description here

@Rudra 2018-05-22 06:10:43

You can do it with rgba color code using CSS like this example given below.

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

@Alireza 2017-10-20 02:41:59

You can use RGBA (red, green, blue, alpha) in the CSS. Something like this:

So simply doing something like this is going to work in your case:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

@Cengkuru Michael 2017-02-11 08:00:03

I normally use this class for my work. It's pretty good.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

@Vijay Sharma 2016-12-29 09:40:00

You can use RGB color with opacity like a color code in RGB (63, 245, 0) and add opacity (like 63, 245, 0, 0.5) and also replace RGB with RGBA. A is to be used for opacity.

div {
  background: rgba(63, 245, 0, 0.5);
}

@Pushp Singh 2016-06-03 12:09:42

In order to make the background of an element semi-transparent, but have the content (text & images) of the element opaque, you need to write CSS code for that image, and you have to add one attribute called opacity with minimum value.

For example,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// The smaller the value, the more it will be transparent, ore the value less will be transparency.

@Tahir Khalid 2016-07-14 14:57:19

This is one way to do it in modern browsers. I combine it with the rgba values as a fallback

@Pushp Singh 2016-07-21 13:05:07

Yes, correct. This is one of the way to deal with modern browser.

@Peter Mortensen 2019-09-08 14:44:48

What do you mean by "ore the value less will be transparency" (it seems incomprehensible)? (Respond by editing your answer, not here in comments, if appropriate.)

@Touhid Rahman 2013-05-20 23:36:50

CSS 3 has an easy solution of your problem. Use:

background-color:rgba(0, 255, 0, 0.5);

Here, rgba stands for red, green, blue, and alpha value. The green value is obtained because of 255 and half transparency is obtained by a 0.5 alpha value.

@Peter Mortensen 2019-09-08 14:41:57

How is this different from some previous answers?

@Will Nielsen 2013-01-08 20:00:39

background-color: rgba(255, 0, 0, 0.5); as mentioned above is the best answer simply put. To say use CSS 3, even in 2013, is not simple because the level of support from various browsers changes with every iteration.

While background-color is supported by all major browsers (not new to CSS 3) [1] the alpha transparency can be tricky, especially with Internet Explorer prior to version 9 and with border color on Safari prior to version 5.1. [2]

Using something like Compass or SASS can really help production and cross platform compatibility.


[1] W3Schools: CSS background-color Property

[2] Norman's Blog: Browser Support Checklist CSS3 (October 2012)

@joren 2010-10-25 13:55:41

Here is a jQuery plugin that will handle everything for you, Transify (Transify - a jQuery plugin to easily apply transparency / opacity to an element’s background).

I was running into this problem every now and then, so I decided to write something that would make life a lot easier. The script is less than 2 KB and it only requires one line of code to get it to work, and it will also handle animating the opacity of the background if you like.

@Slipp D. Thompson 2010-05-24 16:07:51

For a simple semi-transparent background color, the above solutions (CSS 3 or background images) are the best options. However, if you want to do something fancier (e.g. animation, multiple backgrounds, etc.), or if you don't want to rely on CSS 3, you can try the “pane technique”:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

The technique works by using two “layers” inside of the outer pane element:

  • one (the “back”) that fits the size of the pane element without affecting the flow of content,
  • and one (the “cont”) that contains the content and helps determine the size of the pane.

The position: relative on pane is important; it tells back layer to fit to the pane's size. (If you need the <p> tag to be absolute, change the pane from a <p> to a <span> and wrap all that in a absolutely-position <p> tag.)

The main advantage this technique has over similar ones listed above is that the pane doesn't have to be a specified size; as coded above, it will fit full-width (normal block-element layout) and only as high as the content. The outer pane element can be sized any way you please, as long as it's rectangular (i.e. inline-block will work; plain-old inline will not).

Also, it gives you a lot of freedom for the background; you're free to put really anything in the back element and have it not affect the flow of content (if you want multiple full-size sub-layers, just make sure they also have position: absolute, width/height: 100%, and top/bottom/left/right: auto).

One variation to allow background inset adjustment (via top/bottom/left/right) and/or background pinning (via removing one of the left/right or top/bottom pairs) is to use the following CSS instead:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

As written, this works in Firefox, Safari, Chrome, Internet Explorer 8 (and later), and Opera, although Internet Explorer 7 and Internet Explorer 6 require extra CSS and expressions, IIRC, and last time I checked, the second CSS variation does not work in Opera.

Things to watch out for:

  • Floating elements inside of the cont layer will not be contained. You'll need to make sure they are cleared or otherwise contained, or they'll slip out of the bottom.
  • Margins go on the pane element and padding goes on the cont element. Don't do use the opposite (margins on the cont or padding on the pane) or you'll discover oddities such as the page always being slightly wider than the browser window.
  • As mentioned, the whole thing needs to be block or inline-block. Feel free to use <div>s instead of <span>s to simplify your CSS.

A fuller demo, showing off the flexibility of this technique by using it in tandem with display: inline-block, and with both auto & specific widths/min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
    position: relative;
    width: 175px; min-height: 100px;
    margin: 8px;
}

.pane > .back {
    position: absolute; z-index: 1;
    width: auto; height: auto;
    top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
    position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
    <span class="back debug_green"></span>
    <span class="cont debug_red">
        Pane content.<br/>
        Pane content.
    </span>
</p>

And here's a live demo of the technique being used extensively:

christmas-card-2009.slippyd.com screenshot

@Burkely91 2015-06-14 02:23:45

In what situation would one not want to use CSS3 for this?

@Slipp D. Thompson 2016-01-04 10:17:38

@Burkely91 If you can do it in CSS3, then absolutely use that. But CSS3 background don't support all types of content nor full layout flexibilty. The envelope/letter example above would be hard to pull off with CSS3 because of the independently repeating edges and center-fill(s). Also, keep in mind that this answer was originally written 5 years ago, before CSS3 support was widespread.

@Slipp D. Thompson 2016-02-06 11:07:05

@Igor Ivancha Rolled-back your changes. I'm sorry, changing the indentation from my preferred form (tabs) to yours (2 spaces) is not cool. You may have good reason to use 2-space indentation in your day-to-day code projects, but for presentation on the web I believe tabs have the clear win— the deeper indentation makes it easier to discern levels of hierarchy, and it's far easier to reliably convert tabs to spaces and so is a more-compatible form of all readers.

@Slipp D. Thompson 2016-02-06 11:11:37

@Igor Ivancha Also, it appears you ran the code though a beautifier that put every CSS selector and property on its own line. My examples were written with intentional line breaks and spacing to logically group pieces that should be understood together by the reader— e.g. most width: & height: properties share a line because they're the same type of construct and better understood as a 2-dimensional shape, not a pair of 1-dimensional constraints. Further, some of the lines have a fair amount packed into them because it's repeated content that's not all that important to show off.

@Slipp D. Thompson 2016-02-06 11:15:48

@Igor Ivancha Logical organization, grouping, and styling is extremely important to writing sane, understandable code, just as it is with all kinds of writing. The changes you made were the equivalent of going into someone post and removing all paragraph breaks, and putting a forced newline after each sentence. If you'd like to be that obtusely pedantic in your own work, fine, you're free to do so. But please don't dumb-down the semantic character and expression in other people's work.

@Slipp D. Thompson 2019-06-10 14:37:40

@Anshu and everyone else: Please STOP trying to edit my answer changing tabs to spaces. If you prefer spaces, fine, use spaces in your own code. I like tabs and it displays properly on the web. Please DON'T push your preferences on my code and my posts— there's zero legitimate disadvantages to tabs when used with purely hierarchical code, which the above HTML & CSS is. Just STOP IT.

@Anshu 2019-06-10 15:05:24

@paris ionescu 2009-08-04 22:07:55

Here's how I do this (it might not be optimal, but it works):

Create the div that you want to be semi-transparent. Give it a class/id. Leave it empty, and close it. Give it a set height and width (say, 300 pixels by 300 pixels). Give it an opacity of 0.5 or whatever you like, and a background color.

Then, directly below that div, create another div with a different class/id. Create a paragraph inside it, where you'll place your text. Give the div position: relative, and top: -295px (that's negative 295 pixels). Give it a z-index of 2 for good measure, and make sure its opacity is 1. Style your paragraph as you like, but make sure the dimensions are less than that of the first div so it doesn't overflow.

That's it. Here's the code:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

This works in Safari 2.x, but I don't know about Internet Explorer.

@frozenkoi 2013-11-03 07:03:45

The extra element can be avoided and instead use a pseudo element like :before or :after

@SvenFinke 2009-04-30 09:14:40

The problem is, that the text actually has full opacity in your example. It has full opacity inside the p tag, but the p tag is just semi-transparent.

You could add an semi-transparent PNG background image instead of realizing it in CSS, or separate text and div into two elements and move the text over the box (for example, negative margin).

Otherwise it won't be possible.

Just like Chris mentioned: if you use a PNG file with transparency, you have to use a JavaScript workaround to make it work in the pesky Internet Explorer...

@Chris 2009-04-30 09:11:16

The easiest method would be to use a semi-transparent background PNG image.

You can use JavaScript to make it work in Internet Explorer 6 if you need to.

I use the method outlined in Transparent PNGs in Internet Explorer 6.

Other than that, you could fake it using two side-by-side sibling elements - make one semi-transparent, then absolutely position the other over the top.

@Stijn Sanders 2009-04-30 12:51:07

All I need is a simple background color, which size of PNG would you propose I create with this color? 1x1 will make rendering do a lot of work, too much pixels makes this PNG pretty big (should be ok file-size since compressed, but still rendering needs to uncompress it to use it)...

@Chris 2009-04-30 14:27:15

I'd recommend something like 30px x 30px, which uses less memory when rendering it repeating than a 1x1, and is still small enough to minimise bandwidth usage.

@Georg Schölly 2009-04-30 09:52:43

Either use a semi-transparent PNG image or use CSS 3:

background-color: rgba(255, 0, 0, 0.5);

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

@grm 2011-07-13 22:32:03

is it possible to do this with hex colors? Like #fff ?

@kb. 2011-08-12 14:19:43

@Hans 2012-06-06 21:11:15

rgba(R,G,B,"transparency"), so its not possible with hex, because there is no value for the "transparency" part in the hexcode.

@gabeio 2012-12-07 01:57:54

You can but you must convert it from hex code to its RGB counterpart. #RR,GG,BB if I am correct... but in any case you just need to convert the 2 hex characters to a decimal which will end up being from between 255 & 0 which then you can just use directly in this

@outis 2012-12-15 06:59:02

@grm: W3C considered introducing a #RRGGBBAA hex code format, but they decided not to (for various reasons), so we can't.

@Jürgen Paul 2013-05-30 00:34:22

@grm with SASS You can, background-color: rgba(#000, .5);

@iono 2013-11-28 08:17:06

Worth pointing out that if you want to use transparency, every browser that supports RGBA also supports HSLA, which is a far more intuitive color mapping. IE8 is the only pseudosignificant browser that fails to support it, so barring that go ahead and use HSL(A) for every colour.

@Adrien Be 2014-02-25 17:42:03

FYI: RGBA will not work on IE8 & below

@Georg Schölly 2014-03-30 08:32:29

@Alexis: Thanks for the edit, but unfortunately this syntax is only possible with SASS or the like. w3.org/TR/css3-color/#rgba-color

@BoltClock 2015-02-26 19:01:50

@outis: Good news, #RRGGBBAA is now in Color level 4.

@XåpplI'-I0llwlg'I - 2015-04-23 11:10:07

@grm With LESS, you can do background-color: fade(#fff, 50%);.

@EgMusic 2017-10-11 14:54:33

@grm yes, but you cant make it transparent using hexadecimal values

@luke 2018-02-06 13:17:03

@BoltClock it is not yet well supported: caniuse.com/#feat=css-rrggbbaa

@BoltClock 2018-02-06 13:23:50

@luke: Yes, stuff like this does take a while to be implemented. It took a whole year for Chrome to ship it by default after Firefox, and we're still waiting on Edge.

@Gorkem Pacaci 2010-07-13 20:51:05

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

@Rolf 2010-12-19 17:24:54

He said "Without separating the text and background in two elements positioned over each other.". Thanks anyway, this is a good fix and is useful, but in some cases you'd want the opaque element to be a child of the semi-transparent one.

@Adrien Be 2014-02-25 17:40:51

I replied pretty much the same on another SO question but added a jsfiddle & screenshot proofs (IE7+), see here if interested stackoverflow.com/a/21984546/759452

@Adrien Be 2014-02-27 13:40:54

@Gorkem Pacaci: Make sure the opacity properties are "really" cross-browser, you can use this code snippet from CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

@AndFisher 2016-12-06 09:07:36

Why not do it with a pseudo element like :after and avoid the extra markup?

@alex 2015-06-03 07:28:45

If you're using Less, you can use fade(color, 30%).

@edd2110 2014-12-29 16:25:56

There's an easier solution to put an overlay over an image on the same div. It's not the right use of this tool. But works like a charm to make that overlay using CSS.

Use an inset shadow like this:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

That's all :)

@web-tiki 2014-10-05 08:15:14

There is a trick to minimize the markup: Use a pseudo element as the background and you can set the opacity to it without affecting the main element and its children:

DEMO

Output:

Background opacity with a pseudo element

Relevant code:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Browser support is Internet Explorer 8 and later.

@user3968801 2014-09-14 19:21:50

You can use pure CSS 3: rgba(red, green, blue, alpha), where alpha is the level of transparency you want. There is no need for JavaScript or jQuery.

Here is an example:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

@suraj rawat 2014-08-07 02:39:32

If you are a Photoshop guy, you can also use:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Or:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

@Henrik 2013-12-06 14:40:49

You can solve this for Internet Explorer 8 by (ab)using the gradient syntax. The color format is ARGB. If you are using the Sass preprocessor you can convert colors using the built-in function "ie-hex-str()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

@Gelens 2009-04-30 20:42:08

It's better to use a semi-transparent .png.

Just open Photoshop, create a 2x2 pixel image (picking 1x1 can cause an Internet Explorer bug!), fill it with a green color and set the opacity in "Layers tab" to 60%. Then save it and make it a background image:

<p style="background: url(green.png);">any text</p>

It works cool, of course, except in lovely Internet Explorer 6. There are better fixes available, but here's a quick hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

@Donny V. 2012-01-06 20:53:25

You can use paint.net also.

@frozenkoi 2012-01-14 00:14:59

This method allows you to have an image in the background and not only a solid color, and can be used to have transparency on other attributes such as borders. No transparent PNG images are required.

Use :before (or :after) in CSS and give them the opacity value to leave the element at its original opacity. Thus you can use :before to make a faux element and give it the transparent background (or borders) you want and move it behind the content you want to keep opaque with z-index.

An example (fiddle) (note that the DIV with class dad is just to provide some context and contrast to the colors, this extra element is actually not needed, and the red rectangle is moved a bit down and to the right to leave visible the background behind the fancyBg element):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

with this CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

In this case .fancyBg:before has the CSS properties you want to have with transparency (red background in this example, but can be an image or borders). It's positioned as absolute to move it behind .fancyBg (use values of zero or whatever is more appropriate for your needs).

@premgowda 2014-11-18 10:47:44

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/?

@Sebastian Markbåge 2009-05-21 04:07:56

In Firefox 3 and Safari 3, you can use RGBA like Georg Schölly mentioned.

A little known trick is that you can use it in Internet Explorer as well using the gradient filter.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

The first hex number defines the alpha value of the color.

Full solution all browsers:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: 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)";
}

This is from CSS background transparency without affecting child elements, through RGBa and filters.

Screenshots proof of results:

This is when using the following code:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

@philfreo 2009-11-11 18:16:27

But not in IE8. I tried the new -ms-filter syntax but it still didn't work for me :(

@Nordes 2010-04-30 07:24:10

@philfreo : It worked well for me in IE8.

@Slapout 2010-08-20 14:20:05

This post shows how to do it in IE8:robertnyman.com/2010/01/11/…

@Tom Chantler 2011-02-07 23:10:21

@philfreo : If you change the first bit of Sebastian's code to "background: rgb(0, 0, 0) transparent;" it should now work in IE8. This was bugging me for quite some time!

@Thorsten Niehues 2012-08-06 09:05:41

filter:progid Works great with IE 9. color is: transparency,red,green,blue - all two digit hex values.

@user664833 2013-02-06 23:22:39

background: rgb(0, 0, 0) transparent; does not make sense as transparent overrides the fallback color (0,0,0), and makes the background 100% transparent. We're aiming for semi-transparency, so depending on your design, the fallback should either be a solid color (background: rgb(0, 0, 0);) or fully transparent (background: transparent;).

@user664833 2013-02-06 23:23:14

Also, the order of filter:progid and -ms-filter should be the other way around. Check out MSDN's IEBlog on this topic. You will notice you can use .Alpha(Opacity=50) instead of .gradient with HEX values. Finally, those two filters should be followed by opacity: .6;

@Adrien Be 2014-02-27 13:24:54

@Sebastian Markbåge: I added screenshot proofs to the answer. Unfortunately it seems like this does not work as expected. Neither for IE8 nor IE7. Can you review the code snippet I posted along the screenshots & check if I missed something?

@Adrien Be 2014-02-27 13:27:33

@user664833: you are also welcome to review my code since you seemed to have managed to get it working across all version of IE (IE8 and above at least)

@user664833 2014-02-27 19:41:13

@AdrienBe - I edited your answer as per your instructions. Unfortunately I have been out of the headspace of this particular Q&A for some time, so I cannot add to this conversation at this time.

@thinsoldier 2011-01-26 16:36:16

Almost all these answers assume the designer wants a solid color background. If the designer actually wants a photo as the background the only real solution at the moment is JavaScript like the jQuery Transify plugin mentioned elsewhere.

What we need to do is join the CSS working group discussion and make them give us a background-opacity attribute! It should work hand in hand with the multiple-backgrounds feature.

@philnash 2009-04-30 09:52:06

A while back, I wrote about this in Cross Browser Background Transparency With CSS.

Bizarrely Internet Explorer 6 will allow you to make the background transparent and keep the text on top fully opaque. For the other browsers I then suggest using a transparent PNG file.

@fearoffours 2009-04-30 09:13:16

Opacity of background, but not the text has some ideas. Either use a semi-transparent image, or overlay an additional element.

Related Questions

Sponsored Content

6 Answered Questions

[SOLVED] How to make div background color transparent in CSS

14 Answered Questions

[SOLVED] Can I set background image and opacity in the same property?

  • 2010-11-15 11:37:55
  • AP257
  • 542590 View
  • 256 Score
  • 14 Answer
  • Tags:   css

3 Answered Questions

[SOLVED] Why do browsers match CSS selectors from right to left?

13 Answered Questions

[SOLVED] CSS 100% height with padding/margin

  • 2009-01-27 23:28:18
  • Toji
  • 318082 View
  • 790 Score
  • 13 Answer
  • Tags:   css

8 Answered Questions

[SOLVED] Can you set a border opacity in CSS?

  • 2010-10-31 05:48:53
  • mcbeav
  • 567293 View
  • 383 Score
  • 8 Answer
  • Tags:   css opacity

15 Answered Questions

[SOLVED] How to apply a CSS filter to a background image

10 Answered Questions

[SOLVED] CSS background image to fit width, height should auto-scale in proportion

  • 2012-02-13 15:14:33
  • spraff
  • 769274 View
  • 329 Score
  • 10 Answer
  • Tags:   html css

14 Answered Questions

[SOLVED] Set opacity of background image without affecting child elements

  • 2011-02-14 21:30:38
  • jmohr
  • 514012 View
  • 205 Score
  • 14 Answer
  • Tags:   css css3 opacity

8 Answered Questions

[SOLVED] Can I have multiple background images using CSS?

  • 2009-01-08 03:37:17
  • Rudd Zwolinski
  • 403480 View
  • 315 Score
  • 8 Answer
  • Tags:   css background-image

5 Answered Questions

[SOLVED] Opacity of background-color, but not the text

  • 2009-03-12 09:51:09
  • Nir
  • 1009137 View
  • 384 Score
  • 5 Answer
  • Tags:   css opacity

Sponsored Content