Transparen background (color) in div with css.

[Kurda Yon]

Hi,

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
div).

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

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

And here is what css validator says:
Property opacity doesn't exist in CSS level 2.1 but exists in [css3] :
0.5
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.

 

[richard]

Hi,

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
div).

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

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

And here is what css validator says:
Property opacity doesn't exist in CSS level 2.1 but exists in [css3] :
0.5
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.

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
javascript.

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.

 

[cwdjrxyz]

Hi,

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
div).

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

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

And here is what css validator says:
Property opacity doesn't exist in CSS level 2.1 but exists in [css3] :
0.5
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)?

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
http://jigsaw.w3.org/css-validator/ , 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.

 

[Jonathan N. Little]

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.

NO. You are "confused" your need units in style properties for values
that convey *lengths*.

opacity: 0.5

is correct syntax for *CSS3* which is the issue. The validator validates
to CSS2.1.

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

Absolutely incorrect. Firefox 2 supports "opacity" I think since version
1.5, but since it now at version 3.0.3 this is a non-issue.