You can also use svg
for that.
.background-img {
background-image: url(https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 500px;
position: relative;
}
#bigHalfCircle {
position: absolute;
bottom: 0;
}
#bigHalfCircle path {
fill: #fff;
stroke: #fff;
}
<section class="background-img">
<svg id="bigHalfCircle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C40 0 60 0 100 100 Z"></path>
</svg>
</section>
<section class="background--color" style="background-color: #fff; height: 500px;">
</section>
solved How to make background with curves in bottom? [closed]