Background image showing through picture with transparent background

Question

I'm trying to create a banner for a website. For SEO purposes, I decided to see if I could create the banner in type rather than as an imported image. I'm making good progress, but for some reason my background image is showing through a logo overlaid on top of it.

I have the background image (set in css) set with opacity because I don't want it full strength. Over it I place the logo which has a transparent background, but no opacity.

The goal banner is at:

http://arielbalter.com/cio/

The code I'm trying is at:

http://jsfiddle.net/abalter/QzNpQ/

*** HTML *****

<header>
    <div id="outer">
        <div id="background-image"></div>
        <div id="logo">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png" />
    </div>
        <div id="lines">
            <h1 id="line1">check it out!</h1>
            <h1 id="line2">Home Inspection</h1>
        </div>
    </div>
</header>

** CSS ****

header {
    border: 3px double black;
    width: 100%;
    height: 7em;
}
#outer {
    background-size: 100% 100%;
    height: 100%;
    position: relative;
}
#background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
#logo {
    float: left;
    border: 1px dashed green;
    height: 100%;
}
#logo img {
    height: 100%;
}
#lines {
    display: inline-block;
    border: 2px dotted blue;
    top: 0;
    bottom: 0;
}
#line1 {
    display: block;
    position: relative;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-weight: bold;
    font-size: 3em;
    color: FireBrick;
    padding: 0.1em 0 0 0;
    margin: 0 0 -0.4em 0;
    border: 2px dashed green;
    letter-spacing: 0.05em;
}
#line2 {
    display: block;
    position: relative;
    font-family:"Trebuchet", sans-serif;
    font-size: 2em;
    color: black;
    font-weight: bold;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: 2px dashed orange;
    font-variant: small-caps;
}

Thanks!

Answer 1

Diagnosis:

From what I understand based on your CSS, the opacity on #background-image is affecting the opacity of #logo.

Solution 1:

If it's possible, instead of a photo, consider using a background color for parent element with background-color: rgba(x,y,z,a) where the number a is responsible for opacity.

Solution 2:

If you want to use two images on top eachother with only parent element having an opacity, position absolute will help you to display them in seperate divs without any opacity problem.