How to Apply a Blur Filter to a Background Image

In this snippet, we’re going to show how to apply a blur filter to the background image. It is very simple and fast!

Follow up the steps and create a blurred background image for your website.

1. Create HTML

  • Begin by creating a <div> with a class of "image".
  • Create another <div> element with a class name "text".
<div class="image"></div>
<div class="text">
  <h1>W3DOCS</h1>
  <h2>Blurred Background Image</h2>
  <p>Snippet</p>
</div>

2. Add CSS

  • Copy and paste the link of the image.
.image{background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  • Set the height of the image with the height property, then specify the position of the image with the background-position property.
.image {
height: 100%; 
background-position: center;
}

Here, we set the "center" value.

  • After applying the background-position, make the image not repeated with setting the background-repeat to "no-repeat".
.image {
background-repeat: no-repeat;
)
  • Specify the background-size into "cover" which scales background image as large as possible to cover all the background area.
.image {
background-size: cover;
)
  • Now we have to use the filter property so as to make our image blur. The filter property has blur value which applies blur on an image. It is specified by px. The larger the value the more blur will be applied. Here we set it to 5px.
.image {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
)
Do not forget to add -Webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -Moz- for Firefox, -o- for older versions of Opera with the filter property.

Here is what we have. We’re going close to the end.

.image {
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
height: 100%; 
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

So, half of the work is done, now let’s style the text which will be applied to the background image.

  1. Set the color, the font-weight of the text.
.text { 
color: #eeeeee;
font-weight: bold;
border: 3px solid #cccccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

Now let’s see the result.

Example of adding a blurred background image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2{
      font-size:30px;
      }
      .image {
      background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(5px);
      -webkit-filter: blur(5px); 
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      }
      .text { 
      color: #eeeeee;
      font-weight: bold;
      border: 3px solid #cccccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      padding: 20px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <div class="text">
      <h1>W3DOCS</h1>
      <h2>Blurred Background Image</h2>
      <p>Snippet</p>
    </div>
  </body>
</html>

Let’s see another example with the blurred background image.

Example of adding a blurred background image using the :checked selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .background-image {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 1;
      display: block;
      background-image: url(" /uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
      width: 1200px;
      height: 800px;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      }
      .content {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 9999;
      margin-left: 20px;
      margin-right: 20px;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div class="background-image"></div>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.
      </p>
      <p>
        Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.
      </p>
    </div>
  </body>
</html>

Do you find this helpful?

Related articles