Chrome Autofill is removing my background image

So I am trying to create a login/register form with bootstrap modal and my friends and I have gotten fairly far with it. We are having an issue with chrome autofill removing our image that we want within the input of the input. I’ve searched but cannot find an answer as to how to properly stop this from happening. Please help!

HTML

<form>
     <div class="form-group is-valid">
          <label for="username">Username</label>
          <input type="username" class="form-control logreg-imgpos user-img " id="username" aria-describedby="emailHelp" placeholder="Enter username">
      </div>
      <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control logreg-imgpos email-img " id="email" aria- 
               describedby="emailHelp" placeholder="Enter email">
      </div>
      <div class="form-group">
             <label for="psw">Password</label>
             <input type="password" class="form-control logreg-imgpos psw-img " id="psw" 
                placeholder="Password">
      </div>
      <div class="form-group">
              <input type="password" class="form-control logreg-imgpos psw-img " id="psw-re-enter" 
                placeholder="Re-Enter Your Password">
       </div>
</form>

CSS

.logreg-imgpos{
  background-position: 10px;
  background-repeat:no-repeat;  
  padding-left:35px;
}
.user-img{  
  background-image:url(../img/cd-icon-username.svg);   
}

.email-img{  
  background-image:url(../img/cd-icon-email.svg);   
}

.psw-img{  
  background-image:url(../img/cd-icon-password.svg);   
}