How to make a transparent background without background image?

Question

I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.

Is this possible to achieve this without using transparent PNG background image ?

I would answer with `background-color: transparent` but I don't think you're looking for that. What exactly do you mean by a transparent background? *Edit:* upvoted Gaby's answer in case you *were* looking for a completely transparent background. — BoltClock, Jul 11 '10 at 12:01
This is not want I'm looking for. See my comment to Gaby's answer below. — Misha Moroshko, Jul 11 '10 at 12:11
related http://stackoverflow.com/questions/806000/is-it-possible-to-make-semi-transparent-background-but-not-text-in-css — Adriano, Feb 25 '14 at 17:39

score 21 · Accepted Answer · answered Jul 11 '10 at 12:30

21

If you just want the color of the background to be transparent and not the child content, use

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

See this page for more details - it's a css3 spec so won't show up in every browser:

http://www.css3.info/introduction-opacity-rgba/

answered Jul 11 '10 at 12:30

DHuntrods

686
3
9

Note that rgba is not compatible with IE8 but is compatible with IE10+ (IE9 maybe too), Firefox 3+, Safari 3+, Chrome. You can use css3pie polyfill library (see http://stackoverflow.com/tags/css3pie/hot) to make this feature work on IE8 & below. – Adriano Feb 24 '14 at 09:54

Gabriele Petrioli · Answer 2 · 2010-07-11T12:42:24.243

8

Yes.

Set background-color: transparent;

and do not use opacity, as that is what makes semi-transparent the whole div..

updated your example at http://jsfiddle.net/eU7By/1/

UPDATE after comments

you can use rgba for the background-color as @DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

edited Jul 11 '10 at 12:42

answered Jul 11 '10 at 12:00

Gabriele Petrioli

191,379
34
261
317

I meant the that background-color should be semi transparent. In my example, the black background should be semi-transparent (according to opacity). – Misha Moroshko Jul 11 '10 at 12:10

score 1 · Answer 3 · edited May 23 '17 at 12:09

The most cross-browser solution is to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.

Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.

Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

see the jsFiddle example http://jsfiddle.net/DUjzX/1/

The whole code looks like:

The HTML:

 <div class="my-cool-wrapper">
      <div class="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>
      <div class="transparent-background">
      </div>
 </div>

The CSS:

 .my-cool-wrapper {
      position: relative;
 }
 .my-cool-wrapper .text-and-images-on-top {
      padding: 10px 15px 19px 15px;
      z-index: 1;
      position: relative; /* needed to enable the z-index */
 }
 .my-cool-wrapper .transparent-background {
      position: absolute;
      top: 0;    
      width: 100%;
      height: 100%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
      filter: alpha(opacity=10);  /* IE 5-7 */
      -moz-opacity: 0.1;          /* Netscape */
      -khtml-opacity: 0.1;        /* Safari 1.x */
      opacity: 0.1;               /* Good browsers */
      background-color: blue;
 }

read more: Set opacity of background image without affecting child elements

Screenshots proofs IE7 IE8 IE9 IE10 IE11

ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.

score 0 · Answer 4 · answered Jun 06 '11 at 08:06

0

I had to use a 30x30 transparent gif as a background.

background:url('absolute path here');

answered Jun 06 '11 at 08:06

Alkanshel

4,198
1
35
54

score 0 · Answer 5 · edited Feb 01 '22 at 07:48

0

A very simple CSS method to have a clear transparent background in html is this code.

background: rgba(0, 0, 0, 0.6)!important;

edited Feb 01 '22 at 07:48

Syscall

19,327
10
37
52

answered Feb 01 '22 at 07:40

Dogbatsey Senanu

1
1

How to make a transparent background without background image?

5 Answers5

The whole code looks like:

Linked