CODEWITHSUNDEEP
htmlcss
Yus
Yus

Reputation: 29

Make background image blur but not text

I am working on my website and making background the image blurry. But the text on the image is showing blurry too. 

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
   position: absolute;
   top: 18%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}
<div class="container11">
	<img src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow"/>
	<h1 class="centered1">Centered</h1>
	<div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

I also want to add background-image: linear-gradient css to make image blurry. 

background-image: linear-gradient(70deg, rgba(9,132,227,0.85) 40%, rgba(0,59,177,0.98) 100%);

But I stucked in the code and this code is not mobile-friendly. When I checked the website on mobile, the alignment of the text changes.

Upvotes: 0

Views: 164

Answers (1)

yinsweet
yinsweet

Reputation: 2851

Add class blur which has a filter effect to your <img> tag.

.blur {
    filter: blur(5px);
}

<img class="blur" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow"/>



.blur {
  filter: blur(5px);
}

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}
<div class="container11">
  <img class="blur" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow" />
  <h1 class="centered1">Centered</h1>
  <div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

I have updated the second solution that uses the background-blend-mode. However, I do not really understand how blend mode works. Please see the code for the effect that I can do.

.hidden {
  visibility: hidden;
}

.container11:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(16, 123, 204, 1) 0%, rgba(5, 69, 181, 1) 100%), url("https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg"), linear-gradient(90deg, rgba(16, 123, 204, 1) 0%, rgba(5, 69, 181, 1) 100%);
  <!-- background-image: linear-gradient(70deg, rgba(9, 132, 227, 0.85) 40%, rgba(0, 59, 177, 0.98) 100%), url("https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg");
  -->background-size: cover;
  background-blend-mode: color, overlay;
  filter: blur(1px);
}

.container11 {
  position: relative;
  text-align: center;
  color: white;
}

.centered1 {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered {
  position: absolute;
  top: 64%;
  left: 0%;
  transform: translate(-1%, -64%);
}
<div class="container11">
  <img class="hidden" src="https://www.swoopanalytics.com/wp-content/uploads/2019/02/Group-members.jpg" alt="Snow" />
  <h1 class="centered1">Centered</h1>
  <div class="centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>

Upvotes: 1

Related Questions