title: HTML/CSS Gives Image with Transparent Background a White Background
body: <p>I am essentially trying to create an image with a play button in the bottom left corner, that will link to another page to play an audio file. However, I am having a couple issues. First and foremost, even though I specifically am using a play button with a transparent background, it gives it a white background which covers up the image it's on. I tried &quot;background-color: transparent;&quot; for the play button, but that didn't work. Additionally, I am not sure how to resize my play button. I've tried to change the width and height of the image via the &quot;post&quot; class and &quot;post0001&quot; id, but it doesn't seem to work. I apologize if this is too many questions for one post. My code is below. Thank you very much.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    background-color: rgb(300, 300, 300);
  }
  
  .topnav {
    padding-top: 50px;
    /*padding-left: 200px;*/
    position: relative;
    letter-spacing: 2px;
    float: left;
  }
  
  .topnav a {
    font-size: 20px;
    color: black;
    text-decoration: none;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    margin-bottom: 35px;
    margin-left: 80px;
  }
  
  #episodes {
    border-bottom-color: rgb(219, 50, 54);
  }
  
  #sources {
    border-bottom-color: rgb(72, 133, 237);
  }
  
  #about {
    border-bottom-color: rgb(244, 194, 13);
    /*padding-left: 15px;
          padding-right: 15px;*/
  }
  
  #contact {
    border-bottom-color: rgb(60, 186, 84);
  }
  
  .post {
    position: fixed;
    margin-top: auto;
    width: auto;
    top: 120px;
  }
  
  #post0001 {
    width: 500px;
    height: 500px;
    background-image: url(https://static.pexels.com/photos/298611/pexels-photo-298611.jpeg);
    background-repeat: no-repeat;
    padding-bottom: 200px;
    padding-right: 350px;
    padding-left: 15px;
    padding-top: 45px;
  }
  
  .logo {
    font-size: 80px;
    color: black;
    font-family: sans-serif;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="dontgoogleit.css"&gt;
    &lt;div class=l ogo&gt;
      DGI
      &lt;!-- &lt;img src = --&gt;
    &lt;/div&gt;
    &lt;title&gt;
      pls dnt
    &lt;/title&gt;
    &lt;div class="topnav" id="myTopnav"&gt;
      &lt;a href="#episodes" id="episodes"&gt;EPISODES&lt;/a&gt;
      &lt;a href="#sources" id="sources"&gt;SOURCES&lt;/a&gt;
      &lt;a href="#about" id="about"&gt;ABOUT&lt;/a&gt;
      &lt;a href="#contactus" id="contact"&gt;CONTACT US&lt;/a&gt;
    &lt;/div&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="post" id="post0001"&gt;
      &lt;img src="http://www.pngmart.com/files/3/Play-Button-Transparent-Background.png" alt="Play Button" href="#episodeOne"&gt;
    &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>