CODEWITHSUNDEEP
htmlcss
claudios
claudios

Reputation: 6656

Sharp corner curved background image

been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.

.main-header {
  background: url('http://placehold.it/150x150') no-repeat center center;
  background-position: 0% 33%;
	background-size: cover;
  min-height: 480px;
  border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>

I'm looking to have below image. enter image description here

Upvotes: 0

Views: 1217

Answers (3)

VilleKoo
VilleKoo

Reputation: 2854

How about this approach? JSBin

body {
  background: white;
  margin: 0;
}

.main-header {
  background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
  background-position: center;
	background-size: cover;
  min-height: 480px;
  position: relative;
}

.main-header::after {
  content: '';
  display: block;
  position: absolute;
  background: transparent;
  /* You can play around with these numbers to adjust the curve */
  bottom: -4rem;
  left: -25%;
  width: 150%;
  height: 400px;
  border-bottom: solid 4rem white;
  border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>

Upvotes: 1

ASTOMUSIC
ASTOMUSIC

Reputation: 119

if you can use image by img, not background. I think you can try "clip-path" as below.

Codepen example

HTML: 

<div class="main-header">
   <img src="http://placehold.it/150x150">
</div>

CSS:

img {
        -webkit-clip-path: circle(100% at 50% 0);
        clip-path: circle(100% at 50% 0);
    }

and this site is useful to make clip-path (http://bennettfeely.com/clippy/)

Upvotes: 1

LKG
LKG

Reputation: 4192

You can use below code for it

Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works.. 

.main-header {
  background: url('http://placehold.it/150x150') no-repeat center center;
  background-position: 0% 33%;
	background-size: cover;
  min-height: 480px;
  border-bottom-left-radius:60% 30%;
  border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>

Upvotes: 1

Related Questions