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.
<!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.
<!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