18041 sujets

Questions générales et questions de débutants

[Résolu] Une image plein écran différente pour chaque page?

Pages :
Bonjour,
je me permet d'ouvrir un autre fil sur un sujet que j'ai déjà ouvert, mais la question est un peu différente et importante. Cela pourrait servir à d'autre.

Dans un site qui a plusieurs pages, comment faire pour avoir une image plein écran différente pour chaque page?
MatthieuR m'avait proposé ce code CSS, mais cela met le même background sur toutes les pages.

body{
  margin: 0;
  padding: 0;
  font-family: tahoma, arial, helvetica, sans-serif;
  font-size: 150%;
  line-height: 150%;
  text-align: justify;
  background-color: #f2f2f2;
  background-image: url('...img1.png'); 
  background-size: cover;
margin-left:7% ;
margin-right:7%;
}

.wrapper{
  margin-left:7% ;
margin-right:7%;
}


Merci pour vos explications. Smiley biggrin
Modifié par abeille (15 Mar 2016 - 22:31)
Bonjour,

Comme la précisé Matthieu, il te suffit juste de coller une classe différente à chaque page sur ton body, et adapter le CSS en conséquence.
SolidSnake a écrit :
Bonjour,

Comme la précisé Matthieu, il te suffit juste de coller une classe différente à chaque page sur ton body, et adapter le CSS en conséquence.
Ok ok, un peu du mal encore avec la langue du CSS/Html.
Je ne comprends pas bien cette phrase!

Tu veux dire que dans le CSS, je vais créer différents body?
body page1{....}
body page2{....}
body page3{....}

et dans le html, chaque body aura une classe:
<body class="page1">
<body class="page2">
<body class="page3">

C'est ça?
C'est ça.
Tu attribues une class (ou un id) au <body> de chaque page.
Par exemple sur sur ta page d'accueil, ta balise body sera comme ça :
<body id="accueil">
...
</body>

Sur ta page de contact, ta balise body sera comme ça :
<body id="contact">
...
</body>

Ton fichier CSS, commun à toutes tes pages, comprendra en effet les propriétés de toutes tes pages comme ça :
body#accueil{
  background-image: url('fond_accueil.jpg');
}

body#contact{
  background-image: url('fond_contact.jpg');
}

Si on pousse un peu, il faudrait même que tu aies un comportement par défaut (commun) à tous les body :
body{
  background-image: url('fond_par_defaut.jpg');
}

Cette dernière propriété sera écrasée par les autres ayant un id.
ça fonctionne pas du tout!
MatthieuR a écrit :

Par exemple sur sur ta page d'accueil, ta balise body sera comme ça :
<body id="accueil">
...
</body>

Ton fichier CSS, commun à toutes tes pages, comprendra en effet les propriétés de toutes tes pages comme ça :
body#accueil{
  background-image: url('fond_accueil.jpg');
}

Et le fichier -fond_accueil.jpg- est dans le même dossier que le fichier Css. Tous les fichiers html, css et images sont dans le même dossier.
Mais l'image en background ne s'affiche pas!
Est ce qu'il n'y a pas un problème avec la façon d'écrire l'adresse du background?

Merci pour tes explications.
Modifié par abeille (16 Mar 2016 - 16:14)
abeille a écrit :
Est ce qu'il n'y a pas un problème avec la façon d'écrire l'adresse du background?
ça dépend, tu l'a défini comment ton background ?
Peux-tu nous montrer où tu en es dans ton code ?
Oui,voici le Html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>accueil</title>
    </head>

<body class="accueil"> 
<div class="wrapper"> 

<div class="im1"><a href="page1.html"><img src="im1.png" alt="" /><br /></a></div>
<div class="im3"><a href="page1.html"><img src="im2.png" alt="" /><br /></a></div>
<div class="im1"><a href="page3.html"><img src="im3.png" alt="" /><br /></a></div>

</div>
</body>
</html>


et le Css:
body #accueil{
  margin: 0;
  padding: 0;
  background-color: url("couleur1.png"); 
  background-size: cover;
}

.wrapper{
  margin-left:7% ;
margin-right:7%;
}

Je n'ai fait que reprendre le code que Matthieu m'a proposé!
Modifié par abeille (16 Mar 2016 - 16:31)
2 erreurs :

a. body class="accueil" ==> id="accueil"

b. body #accueil ==> pas d'espace entre body et #accueil
abeille a écrit :
Je n'ai fait que reprendre le code que Matthieu m'a proposé!

Pas exactement. En effet, dans la déclaration vous avez laissé un espace entre "body" et "#accueil", et tout le problème vient de là :
body #accueil

Le navigateur interprète cette déclaration comme ceci : l'ID #accueil est un élément enfant de l'élément body.

Alors qu'il aurait fallut écrire ceci :
body#accueil

Et le navigateur comprend ainsi : l'ID #accueil qui est DANS l'élément body.

On aurait aussi pu écrire ceci :
#accueil


EDIT : grillé par lddsoft Smiley cligne
Modifié par Olivier C (16 Mar 2016 - 21:51)
lddsoft a écrit :
2 erreurs :

a. body class="accueil" ==&gt; id="accueil"

b. body #accueil ==&gt; pas d'espace entre body et #accueil
On va pas chipoter pour un espace non? Il est bien difficile ce CSS!

En tout cas, ça fonctionne parfaitement, merci pour vos explications ultra rapides!
Juste avant de mettre "sujet résolué, une dernière question: à quoi sert le 

.wrapper{
  margin-left:7% ;
margin-right:7%;
}
juste après le body.
abeille a écrit :
On va pas chipoter pour un espace non?
Il ne vaut mieux pas raisonner ainsi sinon autant arrêter de coder. En informatique chaque bit a son importance et chaque bit erroné ou manquant provoque un effet papillon pouvant conduire au cataclysme (j'extra-pôle).

Il ne s'agit pas là de chipotage mais de syntaxe.

Il faut plus de rigueur !

Ne baisse pas les bras, on peut déjà constater de nettes progrès.
Greg_Lumiere a écrit :
Il ne vaut mieux pas raisonner ainsi sinon autant arrêter de coder. En informatique chaque bit a son importance et chaque bit erroné ou manquant provoque un effet papillon pouvant conduire au cataclysme (j'extra-pôle).

Il ne s'agit pas là de chipotage mais de syntaxe.

Il faut plus de rigueur !

Ne baisse pas les bras, on peut déjà constater de nettes progrès.
Oui, merci pour tes encouragements! C'était pour plaisanter, je suis surpris chaque jour comme le code demande de la rigueur. il suffit qu'il manque un signe et c'est le Smiley biggol partout!

Merci!
Ah, j'avais pas suivi tous vos échanges et ça m'a fait un peu sourire Smiley biggrin

Pour commencer, et c'est le principal, le code doit être rédigé TRES précisément et heureusement, on aurait du mal à faire les choses souhaitées si on pouvait mettre "." à la place d'un ";" ou "->" à la place de "->". 1+1 ça fait pas 3, même si c'est pas loin de 2 et "tu bouges pas d'un cil" c'est pas pareil que "tu bouges pas d'un cul", c'est pas loin mais c'est pas pareil Smiley lol

Sinon, pour ta dernière question, il s'agissait de répondre à ta première question : avoir une image en plein écran en arrière-plan sans avoir de marge autour...
Tu avais remis tes marges sur le body alors que je t'avais dis de ne les appliquer que sur un bloc enfant (.wrapper).
On aurait pu se passer de ce dernier et appliquer du padding sur le body :
body{
  /*tes autres propriétés*/
  padding: 0 7%;
}

Ca permet de remettre tes marges que tu avais au début, c'est tout ! Après, franchement, tu en fais ce que tu veux, comme de mettre des classes à la place des id ou des espaces là où il n'en faut pas Smiley lol
Modifié par MatthieuR (17 Mar 2016 - 22:38)
MatthieuR a écrit :
Après, franchement, tu en fais ce que tu veux, comme de mettre des classes à la place des id ou des espaces là où il n'en faut pas Smiley lol

Les class, c'est mieux, moins gourmand en ressource (bon les espaces, ça c'est un problème Smiley ravi )
@SolidSnake : tout à fait d'accord, c'était dans l'idée que ça soit une sorte d'id de page pour éventuellement des choses spécifiques mais ça marche aussi bien avec une class
Finalement, cela ne m'a convenu la méthode proposée par Matthieu plus haut (16 mars - 13h15)
Très bien le background pour la page d'accueil, car je ne veux pas faire défiler l'écran.
Mais pour les autres pages, avec une image en background, c'est toute la page qui a cette image. Or je ne voulais l'image plein écran que lorsqu'on arrive sur la page.
Ensuite je veux que la page défile normalement.

Voila ce que j'ai fait, dites moi si c'est correct:

<body id="accueil">  
<div class="imaccueil"><img src="imgaccueil.png" alt=""/></div>
.../...
Chaque page à sa propre classe. Page 1: class="im1" - Page2: class="im2"

le CSS

.imageaccueil{
  margin:0;
  padding:0;
  background-image: no-repeat center fixed; 
}


Pour l'instant, j'ai exactement ce que je veux avec ça ...mais je ne sais pas si c'est correct comme style!
Modifié par abeille (18 Mar 2016 - 15:33)
Rien de choquant ? Si tu veux, sauf que la propriété CSS background-image ne prend que 2 types de valeurs : soit "none" soit "url('mon-image.png')".
Tu peux cependant avoir plusieurs images.
Mais pas du tout de "no-repeat", "center" ou encore "fixed". Ces dernières valeurs sont respectivement des valeurs de background-repeat, background-position et background-attachment.
Si tu veux tout mettre dans une même propriété c'est dans la propriété "background", mais je ne suis pas forcément fan, surtout quand tu commences.

Tu peux donc enlever ta propriété background-image, elle ne sert à rien, elle n'est pas valide et sans doute ton margin:0; et ton padding:0; car par défaut ta div a ces valeurs là.

Le lien donné par MDN est très bien : http://www.cssdebutant.com/coder-en-css-fond-background.html.

Je ne vois pas non plus à quoi sert ta classe .imageaccueil dans ton CSS car tu ne l'utilises pas dans ton HTML.
Et pour finir, ton problème à l'origine, était, si je me souviens, que tu avais des marges autour de tes images et si tu n'appliques ton margin: 0; que sur un enfant de <body> ça ne résout pas le problème.

Cependant si tu as réussi faire ce que tu veux c'est cool !
Modifié par MatthieuR (18 Mar 2016 - 17:10)
MatthieuR a écrit :
si je me souviens, que tu avais des marges autour de tes images et si tu n'appliques ton margin: 0; que sur un enfant de &lt;body&gt; ça ne résout pas le problème.
J'ai pas mis tout le CSS.
Donc j'ai le Body qui est avec margin: 0
Puis j'ai mis une class dans un Div qui englobe toute la page, et cette class dans le CSS est avec margin: 9%.

<body>
<div class="page">
Image de grande taille qui occupe tout l'écran...
Toute la page
...
</div>
</body>


Et pour le Css: 
body{margin: 0;
}
.class"page"{
margin-left: 9%;
margin-right: 9%;
}


Pour l'instant ça fonctionne!

En tout cas merci pour tes explications.
Petit à petit j'avance!
Pages :
Sujet clos
Aller à