CODEWITHSUNDEEP
htmlcss
sam jackson
sam jackson

Reputation: 87

how to created a curved background on top of image

I have this design enter image description here

How can I make the blue curved background on top of the image (I need the transparency as well) ?

I started it with a different backgournd but I don't know where to go from there. Any help will be really appreciated. 

.bg {
  background-image:url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
  max-width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bluebg {
  background-color: blue;
  position: absolute;
}
<div class="bg">
  <div class="bluebg">

  </div>
</div>

https://jsfiddle.net/0rsLxtw5/7/

Upvotes: 1

Views: 349

Answers (2)

Salvatore
Salvatore

Reputation: 1435

I hope the below-given snippet helps!

.bg {
  background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
  height: 200px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.bluebg {
  background: rgba(135, 206, 235, 0.5);
  height: 140%;
  width: 90%;
  -webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
  mask-image: radial-gradient(circle at right, transparent 0, transparent 30%, black 30px);
}
<div class="bg">
  <div class="bluebg"></div>
</div>

Upvotes: 1

Ramesh
Ramesh

Reputation: 2403

I changed your HTML like the parent as child and child as parent.

.bg {
  background-image: url("https://s8.postimg.cc/rsxes8dx1/red_or_blue_pill_crimson_quill-12.jpg");
  max-width: 100%;
  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: blue;
  position: absolute;
  height: 200px;
  width: 100%;
}
<div class="bluebg">
  <div class="bg">

  </div>
</div>

Upvotes: 1

Related Questions