WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

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

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties