Discussion :

[ParisElliot]

Bonjour,

Je souhaite superposer 3 background. Sachant qu'il y en a 1 qui couvre la page entière en .jpg et 2 qui sont dessous en . png.

J'ai deja pas mal cherché, et je tombe uniquement sur cette technique :

https://developer.mozilla.org/fr/doc...onds_multiples

Mais seul celui qui prend la totalité de la page s'affiche.

Merci beaucoup de votre aide !

[Invité]

Bonjour,

comment veux-tu qu'on te donne une réponse si tu ne montres pas ton code (CSS+ HTML associé) ?

[ParisElliot]

Bonjour,

Parce que code est plus que simpliste et ne contient rien pour le moment. Je demande simplement une méthode a suivre.

Le voici tout de même :

Code html :

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
 
            <div id="container">
 
                <div id="accueil">
 
                </div>
 
                <div id="spectacle">
 
                </div>
 
                <div id="achatplace">
 
                </div>
 
                <div id="contact">
 
                </div>
 
            </div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#accueil
{
	width: 100%;
	background: url(../images/perenoel.jpg), 
	url(../images/clown.png), 
	url(../images/fond1.png);
	background-repeat: no-repeat;
	background-size: auto, auto, 100% 100%;
	background-position: left bottom, right bottom, center; 
	height: 100vh;
}

[Invité]

Testé (sur Firefox) : ça fonctionne tel quel.

En plus condensé, ça donne :

Code css :

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

1
2
3
4
5
6
7
8
#accueil {
	width: 100%;
	height: 100vh;
	background: url(../images/perenoel.jpg) no-repeat left bottom,
	url(../images/clown.png) no-repeat right bottom,
	url(../images/fond1.png) no-repeat center;
	background-size: auto, auto, 100% 100%;
}

[ParisElliot]

Alors voila le résultat :



Ici, seule l'image "clown" s'affiche. Sachant qu'elle est rognée et en png, de même pour l'image "perenoel". Par contre, le "fond1" lui prend la totalité de l'écran.

[Invité]

N'aurais-tu pas simplement interverti .jpg et .png ?

Code css :

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

1
2
3
	background: url(../images/perenoel.png) no-repeat left bottom,
	url(../images/clown.png) no-repeat right bottom,
	url(../images/fond1.jpg) no-repeat center;

[ParisElliot]

NOOOOOOOOON ! Ca fait maintenant 2 jours que je bataille avec ça...

Merci beaucoup!