Transparen background (color) in div with css.

Discussion in 'HTML' started by Kurda Yon, Oct 11, 2008.

  1. Kurda Yon

    Kurda Yon Guest

    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.
     
    Kurda Yon, Oct 11, 2008
    #1
    1. Advertising

  2. Kurda Yon

    richard Guest

    On Sat, 11 Oct 2008 09:26:21 -0700 (PDT), Kurda Yon
    <> 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.
     
    richard, Oct 11, 2008
    #2
    1. Advertising

  3. Kurda Yon

    cwdjrxyz Guest

    On Oct 11, 11:26 am, Kurda Yon <> 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.
     
    cwdjrxyz, Oct 11, 2008
    #3
  4. 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
     
    Jonathan N. Little, Oct 11, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jc
    Replies:
    3
    Views:
    1,768
  2. jc
    Replies:
    1
    Views:
    1,393
    Neredbojias
    Mar 19, 2008
  3. fig000
    Replies:
    0
    Views:
    4,576
    fig000
    Sep 6, 2004
  4. Kamaljeet Saini
    Replies:
    0
    Views:
    463
    Kamaljeet Saini
    Feb 13, 2009
  5. Replies:
    1
    Views:
    292
    marss
    Feb 14, 2007
Loading...

Share This Page