Images de fond sous différents blocs

**kint13** · 07/02/2018, 15h45

Bonjour,

J'ai besoin de votre aide svp,
J’imagine que la solution n’est pas très compliquée, je n’arrive pas à faire flotter une image d’un bloc à un autre...
Concrètement je souhaite que :
- mon image 1 « header-fond » (header) soit en haut de la page web (z-index -1)
- mon image 2 « fond-haut » (body) soit en haut de la page web, sous l’image 1 (z-index -2)
- mon image 3 « fond-bas » (footer) soit en bas de la page web, sous l’image 2 (z-index -3)

En l’état l’image 2 commence dessous l’header (image1) & l’image 3 créé un bloc vide dessous le body (image2), le footer n’ayant aucun contenu html hors balise image.
Je souhaite que l’image 3 soit sous le body (contenu du body sur image du footer en bas de page) et éventuellement sous l’image 2 ajusté en fonction du contenu (qui est donc amovible)

Le site est un site d’artiste, le CSS est dynamique intégré dans une feuille php (css.php)
Suite à la volonté des membres d’avoir la main sur l’activation ou non des fonds, visuels de fond,

J’ai modifié le css de manière à ce que chaque membre puisse modifier l’opacité des images de fond, de 0 à 1 :

Voici l’architecture HTML

Code HTML :

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

1
2
3
4
5
6
7
8
9
<header >
	<img id="header-fond" src="includes/visuels/1.png ">
</header >
<body>
	<img id=" fond-haut" src="includes/visuels/2.png ">
</body>
<footer>
	<img id=" fond-bas" src="includes/visuels/3.png ">
</ footer >

Le CSS

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body { 
	margin: auto; 
	width: 1500px; 
	display:block;
	position: relative;
	}
#fond-haut {
	background-repeat: no-repeat ;
	background-position:top center;
	background-size: contain;
	opacity: .9;         /* à ajuster */
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -2;
	}
 
 
header {
	margin: 8px 0px 0px 0px;
	height: auto;
	display:block;
	position: relative;
	}
#header-fond {
	background-repeat: no-repeat ;
	background-position:top center;
	background-size: contain;
	opacity: .9;         /* à ajuster */
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	}
 
footer  {
	margin: 0px 0px 0px 0px;
	height: auto;
	display:block;
	position: relative;
	}
#fond-bas {
	background-repeat: no-repeat ;
	background-position:bottom center;
	background-size: contain;
	opacity: .9;         /* à ajuster */
	position: absolute;
	width: 100%;
	z-index: -3;
	}

Je vous remercie pour votre aide,

Dans l’attente de vos retours,

**ProgElecT** · 07/02/2018, 16h20

Salut

Dans le code HTML, attention, beaucoup de tes balises enferment des caractères espaces.

**JefReb** · 07/02/2018, 17h43

Attention kint13, les balises html d'une page DOIVENT se trouver à l'intérieur de <body> </body>
Ta page html ne peut pas fonctionner comme ça et pour le corps de ta page utilises les balises <main> <section> <article> et/ou <aside>
Il faut:

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
 
<body>
<header >
	<img id="header-fond" src="includes/visuels/1.png ">
</header >
<main>
<section>
	<img id=" fond-haut" src="includes/visuels/2.png ">
</section>
</main>
<footer>
	<img id=" fond-bas" src="includes/visuels/3.png ">
</footer >
</body>

Images de fond sous différents blocs

CSS

Discussions similaires

Partager

Partager