Advertisements
How to Apply a CSS Filter to the Background Image of an Element
Topic: HTML / CSSPrev|Next
Answer: Use the CSS3 blur Filter
You can simply use two different DIV containers, one for the background-image, and other for the content. Finally, you can use CSS positioning to place content DIV over the background image DIV.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<title>Apply CSS blur Filter to the Background</title>
<style>
.wrapper{
position: relative;
}
.background{
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: url("images/sky.jpg") no-repeat center;
background-size: cover;
filter: blur(5px);
}
.content{
padding: 20px 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="background"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to stretch and scale an image in the background with CSS
- How to animate background-color of an element on mouse hover using CSS
- How to combine background image and CSS3 gradient on the same element
Advertisements
