Image is transparent all the way to the background but not header color
<p>I have header line in blue, content box in white and background in light blue.
And when I try to add my .png logo without background into header its background inherts my pages background and not header line color.
It shows like this:
index:</p>

<pre><code>&lt;body&gt;
      &lt;div id="header_tip"&gt;&lt;/div&gt;
      &lt;header&gt;
          &lt;h1 id="logo"&gt;
              &lt;img src="logo.png"/&gt;
          &lt;/h1&gt;
      &lt;/header&gt;
      &lt;div id="content"&gt;


      &lt;/div&gt;

&lt;/body&gt;
</code></pre>

<p>css:</p>

<pre><code>* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
  background-color: #e8fdff;
}

#header_tip {
    height: 15px;
    margin: 10px 5% 0% 5%;
    background-color: white;
    box-shadow: 1px 0px 5px #2c868e;
}
header {
    height: 90px;
    background-color: rgb(44, 134, 142);
    position: fixed;
    width: 100%;
    overflow: hidden;

    left: 0;
    z-index: 999;

    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

header.smaller {
    height: 40px;
}

#content {
    height: 1500px;
    float: center;
    margin: 0px 5% 15px 5%;
    background-color: white;
    box-shadow: 1px 1px 5px #2c868e;
}
#header_tip.smaller {
    background-color: black;
    margin: 0px;
    height: 0px;
}
</code></pre>

<p>I'm using this script which makes header resize and follow while scrolling</p>