Adding a logo to a background in HTML

I am trying to put a logo in my page, which has already a background. The logo is in .png format so it has some transparent zones but with my code those zones appear white. I’m mega noob at the moment so that’s the reason why I cannot probably achieve this.

This is my HTML file:

<body>
    <div class="logo">
          <img src="img/logo.png" class="center">
    </div>

    <div class="form"> 
          .... 
    </div>

</body>

while this my CSS:

img.center {
  float: left;
  height: 150px;
  width: 520px;
  box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
  opacity: 0.7;
}

body {
    font-family: Helvetica;
    background: url("img/background.jpg");
    background-size:cover;
 }

Using the above code I have the logo on the upper left BUT instead of having transparent bits it has them white (like you save a .png image as a .jpg).

I was trying to style the div with name “logo” in this way:

div.logo {
    background-image: url("img/logo.png");
    float: left;
    height: 150px;
    width: 520px;    
    }

but using that, the logo simply disappears. I tried also using the attribute z-index without any results.

Thanks

For one, you need a forward slash for your image path:

div.logo {
    background-image: url("img/logo.png");
    float: left;
    height: 150px;
    width: 520px;    
}

Are you sure that you saved your .png with transparency?

Can you provide a link?

Are you sure that the PNG logo has transparent background?. In my example in jsfiddle with your same values I had no problem.

JSFiddle example

   <div class="logo">
          <img src="http://dragonkimfoundation.org/wp-content/uploads/2016/09/Dragon-Logo.png" class="center">
    </div>

    <div class="form"> 
          .... 
    </div>


    img.center {
      float: left;
      height: 150px;
      width: 520px;
      box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
      opacity: 0.7;
    }

body {
    font-family: Helvetica;
    background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFyEmWRW1cjDqI_rQ4aqZ8eFOB3Sq2z7NUNnUkm7YMJxpLv7WO");
    background-size:cover;
    background-color:orange;

 }