0

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!

abalter
  • 9,663
  • 17
  • 90
  • 145
  • your JSfiddle is blank – Kevin Lynch Aug 14 '13 at 17:44
  • No code at your fiddle, and it's not clear from the first link what "banner" you're referring to, and what the issue actually is? – ernie Aug 14 '13 at 17:47
  • @abalter: Please fill your fiddle so we can help you – Itay Aug 14 '13 at 19:13
  • I'm totally sorry about the jsfiddle! The only think I can think of is that I forgot to save it. AND there is no code under HTML. Major foul. This must be it: http://jsfiddle.net/abalter/f68xn/1/ I was able to use relative and absolute to fix it. http://jsfiddle.net/abalter/F7wx6/ Everntually, instead of using a background with an image on top of it, I am using two images so they both scale. Sorry again. – abalter Aug 15 '13 at 21:18
  • HTML code wasn't showing up because I didn't format it as code. Sorry again. I edited the post to fix it. – abalter Aug 15 '13 at 21:22
  • I was able to use relative and absolute to fix it. I positioned the background image as absolute and the logo as relative. Should I post the answer to my own question: "Answer Your Question"? – abalter Aug 15 '13 at 21:24

1 Answers1

3

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.

Ali Çarıkçıoğlu
  • 1,304
  • 1
  • 12
  • 21
  • Yes, the problem is that logo is ending up behind the background image. I think that is very strange since the background-image is in it's own div, and comes before the logo in the html. The logo image is in it's own div ( – abalter Aug 14 '13 at 19:01