CODEWITHSUNDEEP
htmlcss
Trekstler
Trekstler

Reputation: 71

Image is transparent all the way to the background but not header color

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:

<body>
      <div id="header_tip"></div>
      <header>
          <h1 id="logo">
              <img src="logo.png"/>
          </h1>
      </header>
      <div id="content">


      </div>

</body>

css:

* {
  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;
}

I'm using this script which makes header resize and follow while scrolling

Upvotes: 0

Views: 52

Answers (1)

Josh Harrison
Josh Harrison

Reputation: 6004

It's because you are applying a light blue background to every element, in this rule:

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

The * selector means any element, so this is being applied to your PNG image, and the background colour is showing through due to the alpha transparency.

Separate the rule into two more appropriate rules, like this:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #e8fdff;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  word-spacing: -2px;
}

Voila. Fiddle here

Upvotes: 1

Related Questions