CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Curved background image in CSS

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,

enter image description here

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

Upvotes: 0

Views: 11978

Answers (1)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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>

Upvotes: 2

Related Questions