title: Chrome's autofill hiding text input's background image
body: <p>After successfuly disabling the autofill's yellowish background-color,
  I stumbled upon another feature.</p>
  
  <p>Each of my input elements have a background image, and every time I focus on a text input, the browser suggests values I used before in a drop down list.</p>
  
  <p>After I pick a value, the autofill covers my entire background and hides the image.</p>
  
  <p>Here's my html and css (elaborated in JSfiddle):</p>
  
  <pre><code>&lt;section class="formContainer"&gt;
      &lt;img class="sesameLogo" src="~/Content/Images/Site/sesamelogo.png" /&gt;
      &lt;form id="signUpForm" class="pageForm"&gt;
          &lt;input type="text" name="decoy" class="decoy"/&gt;
          &lt;input type="password" name="decoy" class="decoy" /&gt;
          &lt;input type="text" placeholder="Full Name" name="FullName" id="fullName" /&gt;
          &lt;input type="text" placeholder="Email" name="email" id="email" /&gt;
          &lt;input type="password" placeholder="Password" name="password" id="password" /&gt;
          &lt;input type="password" placeholder="Confirm Password" name="confirmPassword" id="secPassword" /&gt;
          &lt;section id="actionBtnsCont"&gt;
              &lt;button id="btnSignUp" class="mainBtn" type="button"&gt;Sign Up&lt;/button&gt;
              &lt;label class="genContextLbl"&gt;or&lt;/label&gt;
              &lt;button id="btnSignIn" class="genBtn" type="button"&gt;Sign In&lt;/button&gt;
          &lt;/section&gt;
      &lt;/form&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/65wkgqs0/" rel="noreferrer">https://jsfiddle.net/65wkgqs0/</a></p>