How to make div background color transparent in CSS

css html background-color transparent
Mistu4u picture Mistu4u · Aug 4, 2012 · Viewed 825.8k times · Source

I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.

Answer

Jerska picture Jerska · Aug 4, 2012

The problem with opacity is that it will also affect the content, when often you do not want this to happen.

If you just want your element to be transparent, it's really as easy as :

background-color: transparent;

But if you want it to be in colors, you can use:

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

Or define a background image (1px by 1px) saved with the right alpha.
(To do so, use Gimp, Paint.Net or any other image software that allows you to do that.
Just create a new image, delete the background and put a semi-transparent color in it, then save it in png.)

As said by René, the best thing to do would be to mix both, with the rgba first and the 1px by 1px image as a fallback if the browser doesn't support alpha :

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

See also : http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo : My JSFiddle

Related questions

How to make a transparent background without background image?

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 …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More
How to change the background color on a input checkbox with css?

Hello Friends all I'm trying to do is change the background color of a checkbox. I tired many things but nothing works. Can some one help? input[type="checkbox"] { background: #3d404e; border: #7f83a2 1px solid; }

Read More