Clip Image

<style>
.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 300px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
.siteHeader{
    width:150px;
    height: 150px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -0px;
}
</style>
<div class="container">
  <img src="cooking3.jpg" width="400"/>
</div>
<div class="container">
  <img id="clip" src="cooking3.jpg" width="400"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<header class="siteHeader">
    <img src="taskbob/images/1.jpg" class="siteLogo" />
</header>