title: How to use images with no background(even there should be no white background to it) using html and css in a website
body: <p>I want the picture in my website to be transparent in background like the png format but when I include the png image the black and white boxes behind the png image appears as it is thus it makes it difficult for me to position the images using CSS because the images have backgrounds thus it looks weird and doesn't properly work with the CSS positioning element.</p>
  
  <p>These are two images in HTML</p>
  
  <pre><code>&lt;img class="bottom-cloud" src="cloudwithback.jpg"&gt;
  &lt;img class="mountain" src="mountain.jpg"&gt;
  </code></pre>
  
  <p>CSS CODE:
  here is the CSS code to make the background transparent of the images.</p>
  
  <pre><code>.top-cloud
  {
      height: 200px;
      width: :200px;
      background: transparent; 
  }
  .bottom-cloud
  {
      width:200px;
      height:200px;
  }
  .mountain
  {
      width: :300px;
      height: 300px;
      background:transparent;
  }
  </code></pre>
  
  <p>But it doesn't make the background transparent.</p>