0

I'm trying to set the transparency of a <div> to effect the background color only, but any time I do it, it ends up making the entire <div> transparent. Here's my css, and a fiddle to demonstrate:

html {
        background-image: url("https://dl.dropboxusercontent.com/u/47991825/8856597-daisies-green-background.jpg");
    }
    .profilePic {
        width: 128px;
        height: 128px;
        border-radius: 64px;
        -webkit-border-radius: 64px;
        -moz-border-radius: 64px;
    }
    h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
    }
    #mainCont {
        width: 250px;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        padding: 15px;
        border: 1px solid #000000;
        height: 40%;
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 12pt;
        background-color: #000000;
        opacity: 0.4;
    }
    #footer {
        position: absolute;
        bottom: 0;
        height: 40px;
        margin-top: 40px;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    a:link {
        text-decoration: none;
    }

http://jsfiddle.net/joshrlangley/ne2o1r5x/1/

Josh Langley
  • 27
  • 5

2 Answers2

5

(Background) colors have the rgba(r, g, b, opacity) format.

#mainCont {
    // 0, 0, 0 = black
    // 255, 255, 255 = white
    background-color: rgba(0, 0, 0, 0.4);
}

http://jsfiddle.net/rudiedirkx/ne2o1r5x/2/

Background images unfortunately still don't have an opacity option.

Rudie
  • 52,220
  • 42
  • 131
  • 173
0

Instead of using the hex color format, you can also use the rgba() function, it looks like this:

rgba(0, 0, 0, 0.4)

The arguments being like this:

rgba(r, g, b, opacity)

Hope this helped, good luck!

phantom
  • 1,457
  • 7
  • 15