header ad

Sunday, August 19, 2018

How to create a curved background image

Here you can find how to create a curved background image


CSS

.bg {
  background-image: url("https://images.pexels.com/photos/15382/pexels-photo.jpg");
  background-size:100%;
  max-width: 650px;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  -webkit-clip-path: circle(50% at 98% 50%);
  clip-path: circle(50% at 98% 50%);
}

.bluebg {
  background-color:#CCC;
  position: absolute;
  height: 200px;
  width: 650px;
}

HTML

<div class="bluebg">
<div class="bg">
</div>
</div>

No comments:

Post a Comment