Discussion :

[kint13]

Bonjour,
Besoin de votre aide svp,
Je souhaite simplement pouvoir jouer sur l’opacité de mon image de fond de mon header…
…que sur mon image => La fonction opacity est héritée elle ne peut convenir
Lorsque mon fond n’est pas une image mais une couleur cela fonctionne très bien avec background:rgba.
Merci pour votre aide

Code :

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

1
2
3
4
5
6
7
8
9
10
 
header {
	margin: 8px 0px 0px 0px;
	height: auto;
	background-image: url("includes/visuels/1.png");
	display:block;
	background-repeat: no-repeat ;
	background-position:top center;
	background-size: contain;
	}

[NoSmoking]

Bonjour,
place ton image en position:abolute et applique lui l'opacité que tu souhaites, à la louche quelque chose comme :

Code html :

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

1
2
3
4
5
6
<header>
  <img id="header-fond">
  <!--
  le reste de ton header
  -->
</header>

Code :

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

1
2
3
4
5
6
7
8
9
10
header {
  position: relative;  /* pour servir de référent */
}
#header-fond {
  opacity: .5;         /* à ajuster */
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

attention à l'effet de distorsion que peut subir ton image.

[kint13]

Bonjour No Smoking
Au top un grand merci à toi.
Malheureusement j’ai eu des effets de bords sur mes 2 autres images de fonds... un mal pour un bien, car j’ai appliqué les mêmes paramètres à ces dernières afin d’avoir la main sur la modification de l’opacité.
J’ai à présent un nouveau souci, je n’arrive pas à faire flotter mes image de fond d’un bloc à un autre.. Malgré plusieurs heures passées je n’ai pas réussi à résoudre ce problème.
Afin de rester cohérent sur le forum, je vais fermer cette discussion, j’en ai créé une nouvelle discussion afin d’exposer au mieux mon souci. « Images de fond sous différents blocs »
De ce fait, si je peux me permettre de te demander si tu peux jeter un coup d’œil ce serait top je suis convaincu que tu pourras m’apporter la réponse très facilement...
Je te remercie.
https://www.developpez.net/forums/d1...s/#post9984863