CSS Blur Image effect for Blogs OR Website

June 13, 2021


Creating a Blur Background Image CSS




Creating a blur effect on the website/Blos background using a combination of CSS and HTML, this method is very easy to apply and very suitable



If you are studying the front end or appearance of the website.



Basically we only need to focus on the CSS code, because of the code that gives the background blur effect.



Especially the blur effect will look good if we add an image as an effect.






How to Create a Blur Background Effect



The first thing you need to prepare is a notepad and save as an HTML file to review directly in your respective browser whether it is running well or not.




  • Open notepad on each of your computers, then make a prefix code like <html> <head> to cover each code.
    Then copy and paste the CSS code below.


  • Then copy and paste the CSS code below.


body, html {
  height: 100%;
  margins: 0;
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
.bg-image {
  /* The image used */
  background-image: url("URL of the image which you want to connvert in Blur");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Fullheight */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback colors */
  background-color: rgba(0,0,0,0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}




  • Insert the CSS code between the <style> code </style> function because the function is intended to make the display look cooler.


  • Next is to copy and paste the code to display the text on the page that has been given a blur effect.



<div class="bg-image"></div>
<div class="bg-text">
  <h5 font-weight: bold; style="font-size:23px">Welcome to!</h5>
  <h4 style="font-size:15px">MyBloggingFunda</h4>
</div>









CSS Blur Image Background effect for Blogs OR Website

CSS Blur Image Background effect for Blogs OR Website







  • In h5 and h4 size fonts, you can change the words according to your individual needs. Don't forget to put the code above between the <body> code </body> because we want to display the text above the background blur effect.


  • If everything is done, it will look like the image below.



Note



The url that provide is red, please replace it with the url of your respective image, yes, to make it blurry.




Closing Of : How to Creat a Blur Background Effect on a Website/Blog with CSS



Hopefully our short tutorial on making css blur background images can be useful for you guys, thank you.

Tags:

Post a Comment

0 Comments