Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Transparen background (color) in div with css.

Reply
Thread Tools

Transparen background (color) in div with css.

 
 
Kurda Yon
Guest
Posts: n/a
 
      10-11-2008
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.
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      10-11-2008
On Sat, 11 Oct 2008 09:26:21 -0700 (PDT), Kurda Yon
<(E-Mail Removed)> wrote:

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

 
Reply With Quote
 
 
 
 
cwdjrxyz
Guest
Posts: n/a
 
      10-11-2008
On Oct 11, 11:26*am, Kurda Yon <(E-Mail Removed)> wrote:
> 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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-11-2008
richard wrote:

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


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments