2

I am using CSS filters to create a blurry background and have text lay on top. But when I try, the blurry effect is taking place on the text as well. How can I avoid this and keep the text non-blurry?

HTML 

<div id="intro">
   <h1 id="tagline">A dinner to remember...</h1>
</div>

CSS

#intro{
background:url(../img/meal.jpg) no-repeat;
background-size: cover;
height: 500px;
 filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

}

#tagline {
text-align: center;
font-family: 'Lobster', cursive;
position: relative;
font-size: 4em;
color: #fff;

}

screenshot: http://d.pr/i/fAFe

catchmikey
  • 1,739
  • 4
  • 20
  • 20
  • It's inheriting the parents info. You need to undeclare the blur in the nested div – Adsy2010 Nov 03 '13 at 12:27
  • This question and answers (http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text/8858972#8858972 ) deal with applying transparency to the background and keep the text opaque. Perhaps you can modify it to apply the blur to the background and keep the text sharp. – frozenkoi Nov 03 '13 at 12:37

1 Answers1

0

You can't "unblur" an element within a blurred parent element. You can work around that with an absolutely positioned pseudo element, stacked behind your tagline:

#intro {
    height: 500px;
    position: relative;
}

#intro:before {
    content: "";
    background:url(../img/meal.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: -1;
    filter: blur(5px);
}

#tagline {
    text-align: center;
    font-family: 'Lobster', cursive;
    font-size: 4em;
    color: #fff;
}

JSFiddle

kremalicious
  • 1,351
  • 11
  • 12