CODEWITHSUNDEEP
htmlcss
nandwana92
nandwana92

Reputation: 105

How to set a blurry background image with sharp edges?

I want to have a blurry background image for a div container. But if I set the blur filter the edges also will get blurry causing the blurred image to overflow it's frame. This is what I tried till now:

.one {
  height: 400px;
  width: 400px;
  border: 1px solid black;
  /* background-image: url("https://i.imgur.com/JCyxUxA.jpg"); */
/* 	background-repeat: no-repeat;
	background-position: center;
	  background-size: contain;
	 */}

.a {
  background-image: url("https://i.imgur.com/JCyxUxA.jpg");
}

.b {
  background-image: url("https://i.imgur.com/O1jVhYH.jpg");
}

.thing {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.bl {
  filter: blur(20px);
}
<div class="one t">
  <img class="thing" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>  
<div class="one t">
  <img class="thing bl" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>  
<!-- <div class="one a">
</div>
<div class="one b">
</div>
 -->

Upvotes: 0

Views: 314

Answers (1)

Damiano
Damiano

Reputation: 811

Try adding overflow:hidden; to its container (class one in your case). This will hide every part of the children elements that is overflowing its container

Upvotes: 1

Related Questions