Create a Fixed, Darker, Blurry Background Image, with Clear Text Elements

Question

I am making a background image, making it darker and blurry. I also need to keep the texts all clear and unaffected by blurriness. I've written so many text already, and I am trying to figure out to bring them all back to clarity.

So far I have: In HTML:

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

In CSS:

body, html {height: 100%; width:100%;}
.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg"); 
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Help would be much appreciated.

I think this post will help you. https://stackoverflow.com/questions/19752921/clear-text-on-top-of-blurry-background. — sachin, Dec 29 '20 at 04:35

score 0 · Answer 1 · answered Dec 29 '20 at 04:42

I think that this would be what you were looking for: https://css-tricks.com/apply-a-filter-to-a-background-image/

I have also provided a runnable code snippet for your convenience:

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}

.bg {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: white;
  position: relative;
}

.bg::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg);
  background-size: cover;
  filter: blur(3px);
}

.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <title>Title of the page</title>
</head>

<body>

  <div class="bg">
    <div class="module-inside">Content</div>
  </div>

</body>

</html>

score 0 · Answer 2 · answered Dec 29 '20 at 04:54

This will work: Working example: https://jsbin.com/coduvusova/edit?html,css,output

HTML:

<div class="wrapper">
  <div class="bg">
  </div>
  <div class="content">
    <p>
      This is the text...
    </p>
  </div>
</div>

CSS:

body,
html {
  height: 100%;
  width: 100%;
}

.wrapper {
  position: relative;
}
.bg {
  position: absolute;
  min-height: 500px;
  width: 100%;
  background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg");
  filter: blur(3px);
  -webkit-filter: blur(3px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  background-color: red;
  color: white;
  padding: 5px 10px;
  z-index: 2;
}

score 0 · Answer 3 · answered Dec 29 '20 at 05:06

This might help

   body, html {
  height: 100%; margin: 0;font-family: Arial, Helvetica, sans-serif;}

.bg {
background-image: url("https://www.worldofhanszimmer.com/wp-content/uploads/2018/10/03_HansZimmer_Frank_Embacher_Berlin_print_klein-87.jpg"); 
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  color: white;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

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

<div class="bg-text">
<h1>Your text</h1>

</div>

Create a Fixed, Darker, Blurry Background Image, with Clear Text Elements

3 Answers3