[Résolu] {CSS}effet blur sur background css

Bonjour

[i]j'ai voulu mettre un flou pour mon background de ma partie <header> j'ai essaye

le code CSS

filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);[/i]

mais tt la partie hedaer est devenu flou !!! moi je veux que l'effet s'applique seulement pour le background de la partie header

Bonsoir,

En effet le filtre est appliqué sur tout le contenu et sur tous les enfants.
Il y a pas mal de réponse sur stackoverflow en recherchant par exemple "css blur only background".
Le principe est de placer ton background sous ton contenu via une position absolute.

exemple : http://codepen.io/akademy/pen/FlkzB
Modifié par benj (21 Dec 2014 - 03:49)

BNS
Mrc bcq pour votre rep mais ;pour vous dire mon menu est fixe et j'ai pas mis un background pour ma partie header je vais vous montrer le code html et le CSS et mon prb c'est quoi !!
mon code Html

 <header>
	  <a href="#" ><img id="logo" src="image/logo.png" alt="Home"></a>
	   <nav>
	     <ul>
	      <li> <a href="#">Acceuil</a></li>
	      <li> <a href="#">Journal</a></li>
	      <li> <a href="#">Contact</a></li>
	      <li> <a href="#">A propos</a></li>
	     </ul>
	  </nav>
	 </header>

le code CSS

header
{
  display:block;
 height:100px;
  width:97%;
  
  
	padding-left:3%;
    padding-top:21px;

	padding-bottom:21px;
	
	 position:fixed;
    top:0; 
	z-index: 100;


}

mais mon prb c'est quand j'essaye de deplace sur la page
j'ai ce problème


c'est pour ca je veux mettre un flou pour le background du header !!!

Mrc mrc bcq ça répond à mes besoins mrc (Y)