Setting background-image to an image with partial transparency

Question

I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.

#about {
  background-image:url('http://i.imgur.com/B922OoM.png');
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-color: transparent;
  z-index: 2;
  height: 450px;
  width: 100%;      
}

I can't get the div to not fill with white behind the image.

jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about

(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)

Answer 1

Your image is fine. It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white

Red BG body JSFiddle

To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.

Overlayed divs with negative top margin