Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't do background transparency on DIV..

    Now the question is, how do i get the background colour to be 45% transparent as i have another background inplace.

    #content {
    padding:0px 5px 5px 5px;
    border-left:solid 1px #FFFFFF;
    border-right:solid 1px #FFFFFF;
    border-bottom:solid 1px #FFFFFF;
    margin:0 auto;
    text-align:center;
    width:623px;
    height:auto;
    background-color:#000000;

    }

    Now the question is, how do i

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another thing too, i don't want the text to be transparent just the background.

  • #3
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    Code:
    #content {
    padding:0px 5px 5px 5px;
    border-width:0 1px 1px 1px;
    border-style:solid;
    border-color:#FFF;
    margin:0 auto;
    text-align:center;
    width:623px;
    height:auto;
    background-color:#000000;
    opacity:.45;
    }
    until rgba color is widely supported, you will have to overlay a div on top of your semi-transparent background to have non-transparent text.
    Or, you can use a png image with alpha transparency for your semi-transparent background.
    Last edited by eak; 09-11-2007 at 09:10 PM.
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but i can't overlay for some reason, z-index won't do it properly and the position seems to place it off the design.

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It seems css has been really crap then, is there not back-ground-color-opacity or anything like that? I tried overlaying the div but it doesn't work the text still goes in with the transparncy.

  • #6
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    back-ground-color-opacity doesn't exist.

    What does exist is rgba() in css3 (see http://www.w3.org/TR/css3-color/).
    rgba takes 4 arguments: red, green, blue, and alpha (transparency #).

    For now, I would go with a semi-transparent png background image to get the effect you want. It will not work in IE6 unless you use some hacks. Every other browser can render png's just fine.
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't go with images, because the heigths and widths are automatic for the many pages on the website.

  • #8
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    Do you have an example online somewhere?

    What have you done so far?

    see http://css.dev.ericking.us/ for a quick example I made.
    Last edited by eak; 09-11-2007 at 09:57 PM. Reason: added link
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."

  • #9
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How did you get the background like that everytime i try that i get horrid pixles in the transparncy i worked out how to get the background on just getting the img right. I use Cs2 abobe btw, thanks for the help btw.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Oliver, please check your Private Messages.

  • #11
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    The background is a black 1x1 pixel image with the layer opacity dropped down.
    Save for web as a PNG-24, not gif.
    Last edited by eak; 09-11-2007 at 10:51 PM.
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •