Bonsoir
Je tente de reproduire l'effet expliqué dans la vidéo ci- jointe:
j'obtiens l résultat suivant:
le soucis est que le footer n'est pas complétement occulté par le contenu principal
mon code html:
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
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
51
52
53
54
55
56 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="style.css"> <title>Resto</title> <link rel="icon" href="favicon/logoB.ico"> </head> <body> <main class="container"> <nav class="menu"> <a href="#">Burger</a> <a href="#">Sandwich</a> <a href="#">Chawarma</a> <a href="#">Salades</a> <a href="#">BBQ</a> <a href="#">Boissons</a> </nav> <div class="central" dir="ltr"> <div class="logo"> <img src="images/logoB.png" alt="Logo"> </div> <p class="text">Decouvrer des Saveurs exquises</p> <div class="pictures"> <img src="images/burger.jpg" alt="Hamburger"> </div> </div> </main> <footer> <p>©*Copyright*****Chez MED***2023</p> <p><img src="images/loc.png" class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p> </footer> </body> </html>
mon css:
Code css : 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 .container{ position: relative; z-index: 1; box-shadow: 0 2rem 4rem #f3ebe0; } footer{ position:sticky; bottom: 0; padding: 15vmin 2rem; background-image:url("images/fries.jpg"); background-repeat: no-repeat; background-size: cover; }
Merci d'avance.
Partager