Transparen background (color) in div with css.

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I would like to have a <div> with a transparent background color. In
other words I would like have a such div-box that one can see in it
the background image of my page but the image should be mixed with
(dipressed by) the background color of the div-box (let say the
background image in the div should be darker than outside of the

If my explanation is not clear enough, you can see an example of what
I want here: /

I have managed to do that (so I see what I want) but css-validator
complains. Here is what I have:
         border-style: dashed;
         border-width: 2px;
         border-color: #FF0000;
         width: 70%;
         background-image: url('div_bg.php');
         opacity: .5;
         filter: alpha(opacity=50);

And here is what css validator says:
Property opacity doesn't exist in CSS level 2.1 but exists in [css3] :
36 div  Parse Error opacity=50)
37 div  Property -moz-opacity doesn't exist : 0.5
51  Parse Error opacity=50)
51  Property -moz-opacity doesn't exist : 0.5
51  Property opacity doesn't exist in CSS level 2.1 but exists in
[css3] : 0.5

So, if the way I do is bad, is there any good way to do what I want (I
mean a way which css will not complain about)?

I also do not understand why the validator tries to validate my
document as "CSS level 2.1" (why not css3)?

Thank you for any help.

Re: Transparen background (color) in div with css.

Quoted text here. Click to load it

What you're doing is OK. I don't know what that "filter" thing is but
I'm guessing it's for IE. I don't know if you need -moz-opacity (for
older versions of Firefox?)

Just opacity: 0.5 works in recent releases of
Firefox/Opera/Konqueror/Safari, although nested opacity contexts aren't
quite right in Opera (obscure and unlikely to matter in your case).

Quoted text here. Click to load it

CSS 3 isn't finished yet. Neither is CSS 2.1, but it's much more nearly

Although opacity does belong to CSS 3 and not 2.1, it's quite well
supported in the current generation of browsers.

The situation in practice is that CSS 2 is out of date. CSS 2.1 plus
selected bits of CSS 3 (you just have to know which bits) is what
current browsers all aim for and hit reasonably well.

Re: Transparen background (color) in div with css.

On Sat, 11 Oct 2008 09:26:21 -0700 (PDT), Kurda Yon

Quoted text here. Click to load it

In your opacity definition, what is the unit it is supposed to use?
You show like 0.5;
0.5 of what? em's, inches, pixels or percent?
I think it would need to be %.
Then you could try linking to an external style sheet.

Opacity does work in FF 2 however that is as long as it's in some

IE has always been one to add stuff in that may or may not be found
elsewhere. So why shouldn't others incorporate those as well?
It would help make html more flexible.

Re: Transparen background (color) in div with css.

Quoted text here. Click to load it

Just as there are several levels of {x)html, there are several levels
of css. If you validate your css against official w3c standards at , the default is css 2.1, since
that is what most people are using. However if you click on More
Options, among other things, you may select to validate against
several levels of w3c css using the Profile drop down including 1, 2,
2.1, 3, SVG, SVG basic, SVG tiny, mobile, ATSC TV profile, TV profile,
or no special profile. In general new level w3c specifications appear
before all browsers include everything, which is the status of level
3. Also some rogue browsers include css that is not part of official
standards and often is not included on most browsers. Here IE is the
worst example - they do not seem to know or care that the browser war
era is long over for most browsers. It is safest to first write a web
page on a browser that fairly well sticks to w3c standards, such as
Firefox. Then you should check on IE to see any bugs it has and
correct for these. Microsoft conditional comments often will allow you
to use special code for IE only, or often you can use different code
to avoid problems for most browsers in the first place.

Site Timeline