How to blur a banner photo in CSS Style?


Tags: html,css,html5,image,css3

Problem :

So my banner is in a .wrapper.style1 and I've used a webkit-filter to blur the photo but everything gets blurred the Nav Bar and the information inside the Banner. How could I fix this so only the image is being blurred?

Here is the section of my CSS:

.wrapper {
    padding: 6em 0em 4em 0em;
}

    .wrapper.style1 {
        padding: 0em;
        background: url(../images/mlg.jpg); #222222 no-repeat;
        -webkit-filter: blur(10px);

        background-size: cover;
    }

    .wrapper.style2 {
        background: #f2f2f2;
    }

        .wrapper.style2 .major {
            text-align: left !important;
        }

            .wrapper.style2 .major h2 {
                display: block;
                margin-bottom: 0.70em;
                letter-spacing: 1px;
                line-height: 1.4em;
                text-transform: uppercase;
                font-size: 1.8em;
                font-weight: 400;
            }

            .wrapper.style2 .major .byline {
                letter-spacing: normal;
                line-height: 1.6em;
                text-transform: capitalize;
                font-size: 1.4em;
            }

        .wrapper.style2 h3 {
            display: block;
            margin-bottom: 1em;
            letter-spacing: 1px;
            line-height: 1.4em;
            text-transform: uppercase;
            font-size: 1.6em;
            font-weight: 400;
        }

    .wrapper.style3 {
        padding-bottom: 6em;
        background: #82b440;
        text-align: center;
        color: white;
    }

        .wrapper.style3 .container {
            padding-left: 6em;
            padding-right: 6em;
        }

        .wrapper.style3 p {
            font-size: 1.6em;
        }

    .wrapper.style4 {
        background: white;
    }

    .wrapper.style5 {
        background: #82b440;
        text-align: center;
        color: white;
    }

        .wrapper.style5 .image {
            display: block;
            width: 60%;
            margin: 0em auto 2em auto;
        }

            .wrapper.style5 .image img {
                border-radius: 50%;
                border: 10px solid;
                border-color: white;
            }

Here is a copy of some of the HTML:

<html>
<head>
    <title>NueroEdge | Powered By Anazro</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.dropotron.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/footage.js"></script>
    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">

    <!-- Header Wrapper -->
        <div class="wrapper style1">

        <!-- Header -->
            <div id="header">
                <div class="container">

                    <!-- Logo -->
                        <h1><a href="index.html"  img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">

                    <!-- Nav -->
                        <nav id="nav">

                            <ul>
                            <img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
                                <li class="active">
                                <a href="index.html">Home</a>
                                <ul>
                                        <li><a href="aboutus.html">About Us</a></li>
                                        <li><a href="contactus.html">Contact Us</a></li>
                                </li>
                            </ul>
                                <li><a href="https://www.anazro.com/">Anazro Store</a></li>
                                <li><a href="left-sidebar.html">Application</a></li>
                                <li>
                                            <a href="">Roster</a>
                                            <ul>
                                                <li><a href="#">Call Of Duty</a></li>
                                                <li><a href="#">Streaming</a></li>
                                                <li><a href="#">Staff</a></li>

                                            </ul>
                                        </li>
                            <li>
                                    <a href="">More...</a>
                                    <ul>
                                        <!--<li><a href="#">Lorem ipsum dolor</a></li>-->
                                        <li>
                                    <a href="">LeaderBoard</a>
                                    <ul>
                                        <li>
                                            <a href="">Ryan Tarson</a>
                                            <ul>
                                                <li><a href="#"><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</a></li>
                                                <li><Strong>Age:</Strong> 17</li>
                                                <li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
                                                <li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
                                                <li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
                                                <li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
                                                <li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
                                                <li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
                                                <li>Click the links below and become apart of my life!</li>
                                                <div class="row double">                                            
                                                <li><a href="https://twitter.com/TECGaming360" class="button">Twitter</a></li>
                                                <li><a href="https://www.youtube.com/user/TECGaming360" class="button">YouTube</a></li>
                                                </div>
                                            </ul>
                                        </li>
                                        <br>
                                        <li>
                                            <a href="">Kavin I.</a>
                                            <ul>
                                                <li><a href="#"><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</a></li>
                                                <li><Strong>Age:</Strong> 16</li>
                                                <li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
                                                <li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
                                                <li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
                                                <li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
                                                <li>random  hangouts with fans but he would play other games if Call of Duty  is down</li>
                                                <li> or someone requests something different. Kavin loves computers and any type of</li>
                                                <li>electronics for some odd reason. Kavin has a unique personality and which could</li>
                                                <li>make you become addicted to watching him play video games BEWARE!</li>
                                                <div class="row double">                                            
                                                <li><a href="https://twitter.com/KaVn_Ne" class="button">Twitter</a></li>
                                                <li><a href="https://www.youtube.com/channel/UC6RGgeacGovnYZko5ZFAZjg" class="button">YouTube</a></li>
                                                </div>
                                            </ul>
                                        </li>
                                        <br>
                                        <li>
                                            <a href="">Nick Marchitelli</a>
                                            <ul>
                                                <li><a href="#"><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</a></li>
                                                <li><Strong>Age:</Strong> 16</li>
                                                <li><Strong>Current Favourite Game:</Strong> N/A</li>
                                                <li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
                                                <br>
                                                <li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
                                                <li>is captain but everyone has their time to shine if no plays aren’t working.</li>
                                                <li>Hybrid player AR and SMG role.</li>
                                                <li>Currently in 16th place In North America for win on GameBattles</li>
                                                <li>Been Playing Competitive Since COD Ghost</li>
                                                <li>Won a few Online Twitter Tournaments with his team.</li>
                                                <li><Strong>Previous affiliations:</strong></li>
                                                <li>✦<Strong> Spectra eSports</Strong></li>
                                                <li>✦<Strong> Livid eSports</Strong></li>
                                                <div class="row double">                                            
                                                <li><a href="https://twitter.com/Praise_Ne" class="button">Twitter</a></li>
                                                <li><a href="umggaming.com/livid-praise " class="button">UMG Gaming</a></li>
                                                </div>
                                            </ul>
                                        </li>
                                        <br>
                                        <li>
                                            <a href="">Luke Pondillo</a>
                                            <ul>
                                                <li><a href="#"><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</a></li>
                                                <li><Strong>Age:</Strong> 16</li>
                                                <li><Strong>Current Favourite Game:</Strong> N/A</li>
                                                <li>Player for NueroEdge Call of Duty eSports Team.</li>
                                                <br>
                                                <li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
                                                <li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
                                                <li>the team needs it.</li>
                                                <li>Been Playing Competitive Since COD Ghost.</li>
                                                <li>Won a few Online Twitter Tournaments with his team.</li>
                                                <li><Strong>Previous affiliations:</strong></li>
                                                <li>✦<Strong> Spectra eSports</Strong></li>
                                                <li>✦<Strong> Livid eSports</Strong></li>
                                                <div class="row double">                                            
                                                <li><a href="https://twitter.com/FlussoNe" class="button">Twitter</a></li>
                                                <li><a href="#" class="button">YouTube</a></li>
                                                </div>
                                            </ul>
                                        </li>
                                        <br>
                                        <li>
                                            <a href="">Joseph Balasico</a>
                                            <ul>
                                                <li><a href="#"><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</a></li>
                                                <li><Strong>Age:</Strong> 15</li>
                                                <li><Strong>Current Favourite Game:</Strong> N/A</li>
                                                <li>Player for NueroEdge Call of Duty eSports Team.</li>
                                                <br>
                                                <li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
                                                <li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
                                                <li>his team to victory.</li>
                                                <li>Like to use an AR and SMG which makes him a Hybrid Player</li>
                                                <li>Been Playing Competitive COD since COD Ghost.</li>
                                                <li>Won a few Online Twitter Tournaments with his team.</li>
                                                <li><Strong>Previous affiliations:</strong></li>
                                                <li>✦<Strong> Spectra eSports</Strong></li>
                                                <li>✦<Strong> Livid eSports</Strong></li>
                                                <div class="row double">                                            
                                                <li><a href="https://twitter.com/LiviD_Palm" class="button">Twitter</a></li>
                                                <li><a href="#" class="button">YouTube</a></li>
                                                </div>
                                                </li>
                                        </ul>
                                        </li>



                            </ul>
                                        <!--<li><a href="#">Veroeros feugiat</a></li>-->
                                    </ul>
                                </li>
                        </nav>

                </div>
            </div>

        <!-- Banner -->
        <<div id="banner">

         <section class="container">
         <h2>NueroEdge</h2>
                    <span>NueroEdge Outstanding performance at MLG Event</span>
                    <p>Looking for more fantastic players for our team!</P>
                     <a href="application.html" class="button alt">Sign Up</a>

                </section>

            </div>



        </div>


Solution :

I've done this a few times before with several different solutions. What I found the most useful is using the ::before selector. You inherit every background-property you specified and apply the filter.

.wrapper.style1 {
    padding: 0em;
    background: url(../images/mlg.jpg); #222222 no-repeat;    
    background-size: cover;
}

.wrapper.style1::before {
    content = "";
    background: inherit;
    background-size: inherit;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-filter: blur(10px);
}

Sadly, blur doesn't leave sharp edges, so you probably have to zoom in a bit to cover that up.


    CSS Howto..

    How to set margin for elements in my case

    How browser renders HTML

    How to set
  • Backgound color?
  • Angularjs how to add/remove dynamically input form with ng-Repeat on Google Maps?

    How to style nested element that is styled by its parent already

    How do I make entire div a link? [duplicate]

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How to overlap a CSS background over an tag?

    How to style HTML select option hover and selected option effects

    how to make smooth grayscale on hover using CSS

    CSS: how to address Samsung Android browser?

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to add a close button to alertify log with CSS?

    How to format the text below using css

    How to set borders between children from parent in CSS?

    How to center an element based on the parent div?

    How to get CSS selectors to work in the Developer Tools for Chrome 17?

    How to check conditional in CSS?

    In css how to display multiple divs?

    how to display tabs in more than one row having the extra tabs coming one row up rather than one row below?

    How do I apply CSS Transition to my responsive menu?

    How to protect my injected elements CSS?

    toggle css as well as show/hide jquery

    How to beautify this nested list with css?

    JQuery : How to disable mouse move vertically?

    How can I track down a:hover jquery source?

    Double Scroll Bars kept showing in Windows Broswers

    hide and show Div on click

    How can I split a text in 2 color vertically?

    How to setup a multi-department form using JavaScript