How to change Banner Image & Contents

<section class="hero-area">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="block">
          <h1>We Create Beautiful Websites</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-scroll href="#services" class="btn btn-main">Explore Us</a>
        </div>
      </div>
    </div>
  </div>
</section>

.hero-area {  
 background-image: url("../img/slider/hero-img.jpg");  
 background-size: cover;
}