w3 schools template showing image differently when loaded from an html tag

[bobi]

Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css   

.bgimg-1{

      min-height: 100%;
      background-image: url(/w3images/parallax1.jpg);

         }  

 (from the style brackets after the head tag )

I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1:

<!-- First Parallax Image with Logo Text -->

<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
 <img src="/w3images/parallax1.jpg">    
  <div class="w3-display-middle" style="white-space:nowrap;">
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
  </div>
</div>

However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?