CSS中的弯曲背景图片

Question

I'm trying to achieve something like in the picture below (curved background image) from state street website, but in CSS.

Thanks to posts from other users on stackoverflow, I've been able to create something a bit similar using border-radius, see http://jsfiddle.net/dg44thbr/9/

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

Is it possible in CSS?

Thanks,

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;
}

Answer 1

Well, you can try this one on for size: http://jsfiddle.net/dg44thbr/10/

 body { margin: 0; background: red; } div#back { position: relative; height: 100px; background-image: url(http://wearepeak.co.uk/wp-content/uploads/2016/02/testimonial.jpg); width: 100%; border-bottom-left-radius: 250% 160px; border-bottom-right-radius: 0; margin-left: -2em; padding-right: 2em; } 

 <div id="back"></div>