Discussion :

[_SlyK]

Hello,

J'aimerais savoir s'il est possible de mettre un 'masque' sur l'ensemble du site mais pas sur les images ou le texte.

Je m'explique, j'ai une image qui possède un 'effet' transparant que j'aimerais mettre sur le background du site. J'ai donc utiliser ces CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body {
    background-image: url('bg-mask.png');
    background-color: #fff;
}

Mon soucis c'est que sur d'autre section possédant un fond, comme le header et le footer, je n'ai pas ce masque. Et même si je leur rajoute la règle CSS pour avoir l'image de fond, elle sera non seulement 'décalée' mais en plus les bordures ne l'auront pas.

Est-ce qu'il y aura un moyen, que ce soit en javascript ou css de mettre ce masque sur absolument tout les backgrounds sauf des images et le texte ?

Merci.
Cordialement.

[Torgar]

Salut,

Il faut jouer avec la propriété z-index.

En gros, ton overlay aura un z-index de 10 et les img auront un z-index de 11. Idem pour les textes.

Illustration :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.overlay {
	position: relative; /* parce que le z-index ne fonctionne que pour les éléments positionnés */
	z-index: 10;
}
 
img, p { /* parce que tous tes textes sont bien évidemment dans des balises <p> */
	position: relative;
	z-index: 11;
}

[_SlyK]

Re !

Merci pour ta réponse.
Mais ça ne résout pas mon problème.

Imaginons que j'ai ces styles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body, header, footer {
    background-image: url('bg-mask.png');
}
 
body {
    background-color: #fff;
    font-family: 'Open Sans';
}
 
header {
    background-color: #f9f9f9;
    border-top: 10px solid #fafafa;
    border-bottom: 10px solid #fafafa;
    height: 70px;
    margin-top: 20px;
}
 
footer {
    background-color: #f0f0f0;
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
}

Mon overlay s'affiche correctement, mis à part qu'il ne se répète pas correctement sur mes blocs header et footer.

Sauf qu'il ne va pas sur les bordures de mes section.

En image :



Cordialement.

[rodolphebrd]

Bonjour,

plutôt que d'imaginer vos styles pourquoi ne pas envoyer votre code HTML et CSS et/ou une page en ligne.

[_SlyK]

Re !

Voici le layout en question : https://dl.dropboxusercontent.com/u/...2/s/index.html


Cordialement.

[Invité]

Salut,

Perso je le vois de partout ton masque, donc où est le problème ?

Sinon, utilises un padding avec les propriétés CSS qui conviennent : le fait de remplir le padding de la même couleur que le background. Et tu enlèves les border.