Div In Background, Behind Blog

Discussion in 'Web Design and Development' started by macjram, Feb 1, 2009.

  1. macjram macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #1
    RESOLVED

    I want to set up a translucent div in the background of my blog so that the content will appear to "lay" on top of the translucent div that goes all the way from the top of the page to the bottom fo the page.

    http://mfjram.com/wp/

    heres the code I have

    <div id="translucent">

    </div>

    before </body>

    and my css is

    #translucent {
    width: 700px ;
    height: 100% ;
    background-color:#fff;
    position:absolute;
    top:0;
    margin-left: auto ;
    margin-right: auto ;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Using opacity will cause the entire contents to become transparent, not just the background. You can use rgba to do just the background,
    Code:
    #translucent {
     background: rgba(0, 0, 0, .6);
    }
    Though IE doesn't yet understand this. An alternative is to create a small png image that has the transparency you want and place it as the background image. This will require you to use one of the IE fixes for transparent pngs though. IE will slow you down no matter what way you take.
     
  3. macjram thread starter macrumors 6502a

    macjram

    Joined:
    Dec 20, 2008
    #3
    I hella forgot about transparent pngs hahah, thanks !

    Also, do you know how I can expand a div but have it remain in the center of the page?

    edit; Resolved !

    Thanks
     

Share This Page