title: Is there a way to remove or hide a part of an image with css or jquery
body: <p>I am making a website which has a certain background image. When it changes screen size i need the middle part of an image do be removed so the graphic would look slimmer . Here is the picture. </p>
  
  <p>This is how it is now : </p>
  
  <p><a href="https://i.stack.imgur.com/olpUG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/olpUG.png" alt="enter image description here"></a></p>
  
  <p>This is how i need it when the screen is changed to tablet :</p>
  
  <p><a href="https://i.stack.imgur.com/E1nbr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E1nbr.png" alt="enter image description here"></a></p>
  
  <p>My html : </p>
  
  <pre><code>&lt;section class="hero" style="background-image: url(./images/hero.png)"&gt;
  &lt;header class="header"&gt;
    &lt;img src="./images/logo.png" alt="Logo image" class="logo"&gt;
    &lt;div class="shape hamburger"&gt;
      &lt;!-- &lt;a href="javascript:;" class="line-shape"&gt;&lt;span class="hide"&gt;Hamburger icon&lt;/span&gt;&lt;/a&gt; --&gt;
      &lt;a class="line-shape" href="javascript:;"&gt;&lt;span&gt;&lt;/span&gt;&lt;span class="hide"&gt;Hamburger icon&lt;/span&gt;&lt;/a&gt;
      &lt;span class="shape-txt" &gt;MENU&lt;/span&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="row"&gt;
    &lt;div class="col col-2 offset-2 col-2-t offset-2-t"&gt;
      &lt;h1 class="section-title"&gt;
        Living our values
        Transforming our business
      &lt;/h1&gt;
      &lt;p class="txt"&gt;
        UDG Healthcare plc&lt;/br&gt;
        Annual Report and Accounts 2015
      &lt;/p&gt;
      &lt;a href="javascript:;" class="padded"&gt;&lt;span class="s s-down-arrow"&gt;&lt;span class="hide"&gt;download&lt;/span&gt;&lt;/span&gt;Download Full Report &lt;span class="no-under"&gt;(PDF, 2.5 MB)&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;span class="above-btn"&gt;Explore our year&lt;/br&gt;
      in review&lt;/span&gt;
  &lt;button type="button" class="down"&gt;&lt;img src="./images/down.png" alt="Move to the top content"&gt;&lt;span class="s s-down-arrow btn-arrow"&gt;&lt;span class="hide"&gt;Move Down&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>My css :</p>
  
  <pre><code>.hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: $hero-bg-cream;
    overflow: hidden;
  
    .row {
      margin: 0;
    }
  
    h1 {
      padding: 106px 0 7px;
      line-height: 1.15;
      word-spacing: 5px;
      letter-spacing: 0px;
      width: 70%;
      font-size: 40px;
      color: $grey;
    }
  
    .txt {
      line-height: 19px;
      padding-bottom: 14px;
      color: $grey;
    }
  
    .padded {
      padding-bottom: 421px;
    }
  
    .s-down-arrow {
      &amp;:last-child {
        left: -38px;
        color: $grey;
        top: 0;
      }
    }
  
    .above-btn {
      font-size: 14px;
      text-align: center;
      display: block;
      padding-bottom: 16px;
      color: $grey;
    }
  
    .down {
      transform: translateX(13%);
    }
  
    @include breakpoint (tablet) {
      h1 {
        font-size: 29px;
        padding: 217px 0 7px;
      }
  
      .txt {
        padding-bottom: 10px;
      }
  
      .padded {
        padding-bottom: 308px;
      }
  
      .down {
        transform: translateX(10%);
      }
    }
  }
  </code></pre>
  
  <p>I guess I would need to remove the right part of the image or something like that ?</p>