高于DIV的透明PNG给出了奇怪的结果

Question

I have weird problem where placing transparent png above div makes png take websites background color and apply it to entire transparent area instead displaying things that are below the image.

Colors of div and image are identical.

How I expected it to look: http://i.imgur.com/ccr8jkn.jpg

How it looks: http://i.imgur.com/fK1xZgI.jpg

I'm not really sure maybe it's not even possible enlighten me.

Markup looks like this.

<div id="wrapper">
  <div id="menubarwrap">
    <div id="menubar"></div>
  </div>
  <div id="logo">
    <img class="menu-logo" src="/img/etc..">
  </div>
</div>

CSS:

#wrapper {
  position: relative;
}
#wrapper #menubarwrap #menubar {
  margin: 110px 0 0 0;
  height: 50px;
  width: 100%;
  background: #122137;
}
#wrapper #logo .menu-logo {
  position: absolute;
  margin: 0 auto;
  display: block;
  top: -75px;
  right: calc(50% - 100px);
}

Answer 1

Reset the background and it might work. Could you try this CSS:

#wrapper #logo .menu-logo {
  position: absolute;
  margin: 0 auto;
  display: block;
  top: -75px;
  right: calc(50% - 100px);
  background: none;
}