Curved background image in CSS
<p>I'm trying to achieve something like in the picture below (curved background image) from <a href="http://www.statestreet.com" rel="nofollow noreferrer">state street</a> website, but in CSS.</p>

<p>Thanks to posts from other users on stackoverflow, I've been able to create something a bit similar using border-radius, see <a href="http://jsfiddle.net/dg44thbr/9/" rel="nofollow noreferrer">http://jsfiddle.net/dg44thbr/9/</a></p>

<p>The issue is that my curve... is too curvy. I'd like it to be more "straight" like the state street one.</p>

<p>Is it possible in CSS?</p>

<p>Thanks,</p>

<p><a href="https://i.stack.imgur.com/cHbjS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cHbjS.jpg" alt="enter image description here"></a></p>

<pre><code>body {
  margin: 0;
  background: red;
}

div#back {
  position: relative;
  height: 200px;
  background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg);
  width: 100%;
  border-bottom-left-radius: 70% 60px;
  border-bottom-right-radius: 30% 10px;
}
</code></pre>