How to blur background image using CSS ?
In this article, we will see how to blur background images using CSS, along with knowing basic implementation through the examples.
CSS Cascading Style Sheets is a language that is used to describe the appearance and formatting of a document written in HTML. It provides a way for developers to control the layout and visual aspects of a webpage without affecting its content. CSS allows for easy customization of a web page’s color, font, spacing, and other elements to make it a crucial tool for creating professional-looking and functional websites.
To blur a background image using CSS, you can use the filter property. The filter property is used to set the visual effect of an element.
Syntax:
body {
background-image: url(your-image-url.jpg);
filter: blur(10px);
}
Example 1: In this example, we will use HTML and CSS to create a blurred background image effect using the CSS filter property with a value of blur(10px) applied to an HTML div with the “background” class. The background image is specified using the CSS background-image property with a URL to an image file. The filter property is set to blur the background image by 10 pixels.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Blurred Background image in CSS
</ title >
< style >
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.background {
position: absolute;
height: 100%;
width: 100%;
background-image: url(
background-size: cover;
background-position: center;
filter: blur(10px);
z-index: -1;
}
.text-container {
text-align: center;
}
</ style >
</ head >
< body >
< div class = "background" ></ div >
< div class = "text-container" >
< h1 style = "color:green" >
Welcome to Geeks for geeks</ h1 >
< h3 >Blurred Background Image</ h3 >
< p >
Example of css program to blur
background image
</ p >
</ div >
</ body >
</ html >
|
Output:
Blurred background Image
Example 2: This is an example of an HTML and CSS code for creating a blurred background image for better understanding. The code creates a full-screen blurred background image by applying the CSS filter property with a blur value of 5 pixels to the background image. The background image is displayed in a div element with a class of “background”.
The CSS code also sets the height and width of the div to 100% to ensure it covers the entire viewport and sets the background image to a specific URL using the background-image property. The background-size property is set to “cover” to ensure that the image covers the entire div element, and the background-position property is set to “center” to ensure that the image is centered within the div. Finally, the z-index property is set to -1 to ensure that the background image is behind all other content on the page.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Blurred Background image in CSS
</ title >
< style >
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.background {
position: absolute;
height: 100%;
width: 100%;
background-image: url(
background-size: cover;
background-position: center;
filter: blur(5px);
z-index: -1;
}
</ style >
</ head >
< body >
< div class = "background" ></ div >
< center >
< h1 style = "color:green" >
Welcome to Geeks for geeks</ h1 >
< h3 >Blurred Background Image</ h3 >
</ center >
</ body >
</ html >
|
Output:
Blurred Background image which contains text
Last Updated :
01 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...