Bonjour à tous je voudrais inserer un gradient sur mon image et seulement mon image (pas la police) du coup j'ai utilisé le code suivant.

mport url('https://fonts.googleapis.com/css?family=Poppins|Ubuntu');


*
{
	margin: 0px;
	padding: 0px;
}

header
{
	width: 100%;
	height: 700px;
    background-image: url(Presentation1.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative; 
    background-size: cover;
    background-position: 10% 0%;

}
header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #8b86d3, #322a50);
  opacity: 0.8;
}

#conteneur
{
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    height: 70px;

}
#image
{

	background-image:url("Logo.png");
	background-repeat: no-repeat;
	margin-left: 70px;
}
#image nav
{
	padding: 18px;
	margin-left: 230px;
}
#image nav ul 
{
	list-style-type: none;
}
#image nav ul a
{
	text-decoration: none;
	font-size: 16px;
	color: #FAFAFA;
	font-family: "Poppins";

}
#image nav ul a li
{
	display: inline;
	padding: 25px;
}

Par contre voici le resultat obtenu : 

Quel est la solution pour rendre la police normal sans qu'elle soit affecter par la partie header:before? Merci d'avance 

il faut sortir tes autres éléments du flux avec une position, soit relative soit absolute soit fixed et après c'est avec la propriété z-index que tu passes un élément sur l'autre en fonction de la valeur du z-index. Genre z-index:1; z-index:2; etc. Les valeurs les plus grandes sont dessus les valeurs les plus basses dessous.
Pour ton background, tu n'as pas besoin d'utiliser la propriété background-repeat, tu fais directement

background:url(monimage.jpg) no-repeat;

-
Edité par Anonyme 10 décembre 2017 à 16:41:10