Background image html css
Bonjour,
Je commence en codage et j'ai créé cette "page" web pour progresser et tester de nouveaux effets comme ici un début d'effet parallaxe, mais j'ai un problème dans mon code. car La page se lance mais il n'y a que le texte qui s'affiche.
Je précise le dossier html, css et les photos sont dans le même dossier.
Merci de votre aide.
Je commence en codage et j'ai créé cette "page" web pour progresser et tester de nouveaux effets comme ici un début d'effet parallaxe, mais j'ai un problème dans mon code. car La page se lance mais il n'y a que le texte qui s'affiche.
Je précise le dossier html, css et les photos sont dans le même dossier.
Merci de votre aide.
3 réponses
-
ModérateurBonjour,
Déjà.. pour poster ton code sur le forum, tu dois le faire en utilisant les BALISES DE CODE
(explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code )
Des images ne nous permettant pas d'en faire des copier/coller pour tester..;
Ensuite, comme le plus souvent chez les débutants.... as tu bien pensé à vider le cache de ton navigateur ?
Pour rappel : Lorsque l'on modifie du CSS ou du Javascript .... il faut IMPERATIVEMENT vider le cache de son navigateur pour être sûr que les modifications sont bien prises en compte...
Pense également à utiliser les "outils de développement" disponibles dans ton navigateur afin d'examiner les différents éléments de ta page et essayer de voir ce qui est chargé ou non...
-
ModérateurIl faut un egal et non les deux points.
href:"
A remplacer par
href=" -
Bonjour,
Merci de votre réponse.
Alors voici, mon code.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Effet Parallax</title> <link rel="stylesheet" href:"index.css"> </head> <body> <div class="par part1"> <h1 class="title">Parallax Effect using css</h1> </div> <div class="separate"></div> <div class="par par2"> <h1 class="title">seulement html et css</h1> </div> <div class="separate"></div> <div class="par par3"> <h1 class="title">Mon site parallax</h1> </div> </body> </html>
body { margin: 0; padding: 0; width: 100%; height:100%; } .separate { height: 90%; width: 100%; background: #000; } .par { height: 90%; width: 100%; background-size: cover; display: table; text-align: center; } h1 { vertical-align: middle; display: table-cell; font-size: 60px; color: #fff; font-family: Verdana; text-shadow: 10px 10px 10px black; } .part1 { background: url('image.jpg) center fixed; } .par2 { background : url('image2.jpg') center fixed; } .par3 { background : url('image3.jpg') center fixed; }
