This code provides a solution for creating a blurred background behind a <div> element using CSS. The main purpose of this code is to add a visually appealing effect to the webpage by blurring the background image or content behind a specific <div> container.
The code achieves this effect by applying a background image with a blur effect to the targeted <div> element. Overall, this code enables developers to enhance the visual design of their webpages by adding a stylish and attractive blur effect to specific content sections.
How to Create CSS Blur Background Behind div
1. Create a <div> element with a unique ID and assign it a class name “blurred-bg”:
<div id="box1" class="box blurred-bg tinted"> <div class="content"> <!-- Your Content Goes Here --> </div> </div>
2. Next, we need to apply CSS styles to achieve the desired blurred background effect. We’ll focus on the essential CSS properties. Copy the following CSS code into your stylesheet or <style> tag:
.box { width: 500px; height: 300px; left: -webkit-calc( 50% - 250px ); top: 20%; position: absolute; border-radius: 5px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); padding: 20px; text-align: center; box-sizing: border-box; display: flex; transition: box-shadow .3s ease; } .box .content { margin: auto; } .blurred-bg { background-image: url("path/to/your-background-image.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; filter: blur(8px); /* Adjust the blur radius as per your preference */ }
In the above CSS code, we define the styles for the <div> container with the class “box”. We set the width, height, position, border radius, box shadow, padding, and text alignment properties to create a visually appealing container for our content.
We then target the “content” class within the <div> to center the content vertically and horizontally.
The “blurred-bg” class is applied to create the blurred background effect. Here, we set the background image using the url() function and adjust properties like background-repeat, background-size, and background-attachment to control how the image is displayed. The filter property with the blur() function is the key to achieving the blur effect. You can adjust the blur radius to your liking.
That’s all! hopefully, you have successfully created a blur Background effect behind the div element using CSS. If you have any questions or suggestions, feel free to comment below.
