Background image html css
antoinehtml
Messages postés
5
Statut
Membre
-
jordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
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.
A voir également:
- Background-image html
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Reduire taille image - Guide
- Légender une image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
3 réponses
Bonjour,
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...
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...
Bonjour,
Merci de votre réponse.
Alors voici, mon code.
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;
}
