How can I make my header pic on my website responsive?

My header pic looks blurry when I resize the screen so how can I make it responsive?

.headerpic {
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 0.8;
  webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0 auto;
  max-height: 300px;
}

<div class="header">
  <img class="headerpic" src="images/header.jpg" alt="English header" sizes="(max-width: 480px) 100vw">
  <div class="title">
    <h1>English</h1>
  </div>
</div>