5603 sujets

Sémantique web et HTML

1 fond d'écran par page

Bonjour,

J'ai codé ceci :

Page 1

<style>


body {
    background-image:url(fond 1.jpg);
	background-size: cover; 
	background-attachment:fixed;
}


</style>


Page 2

<style>


body {
    background-image:url(fond 2.jpg);
	background-size: cover; 
	background-attachment:fixed;
}


</style>


Le fond 1 affecte bien la page 1
mais le fond 2 n'apparait pas sur la page 2.

Merci de votre aide.
Salut,

Dans ton css tu cibles la balise '<body>' qui s'applique à tous les pages. Il faut utiliser une classe et une autre balise qui engloberait tout le contenu.

Par exemple:

fichier page-1.html

  <div class='page-1'>
      <header></header>
      <main></main>
      <footer></footer>
  </div>


fichier page-2.html

  <div class='page-2'>
      <header></header>
      <main></main>
      <footer></footer>
  </div>




 .page-1{
   background-image: url('toto.jpg')
 }
 .page-2{
   background-image: url('tata.jpg')
 }
Ou encore mieux. Une classe 'bg' qui regroupe les propiétés communes et une classe spécifique pour chaque page.

fichier page-1.html


   <div class='bg bg-page-1'>
      <header></header>
      <main></main>
      <footer></footer>
  </div>


fichier page-2.html


   <div class='bg bg-page-2'>
      <header></header>
      <main></main>
      <footer></footer>
  </div>


le CSS


 .bg{
  background-size: cover;
  background-attachment: fixed;
 }

.bg-page-1{
 background-image: url('toto.jpg');
}

.bg-page-2{
 background-image: url('tata.jpg');
}
Merci pour ces 2 réponses.

Cependant aucune de ces propositions ne fonctionne : les images de fond ne s'affichent plus.

Peut-être y a t-il de ma part une méconnaissance de la manipulation de "url" en CSS.
Précision : tous les fichiers (.html, .css. et . jpg) se trouvent dans un unique répertoire.

A nouveau merci de votre aide.

L'âge avancé qui aère le reste de mes neurones depuis 6 mois d'HTML et de CSS sollicite votre indulgence.
Bonjour,
très certainement un problème de chemin sur les images. Même les "" oubliés sur ton code ne les empêcheraient pas de s'afficher. Presque à chaque nouvelles images que je place, je me plante sur un JPG au lieu de jpg, un tiret en moins, une majuscule. Il faut aussi bien vérifier les chemins des images. Si par exemple tu veux cibler une image sur la racine, il faut écrire 
background-image:url("Images/Toto.jpg");

Le / ne doit pas être devant Images, c'est une erreur classique. Vas voir ce lien, très utile :https://www.alsacreations.com/astuce/lire/78-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html
Et oui, comme le précise allan, tu ne peux pas cibler deux fois body avec deux images de fond. Tu devrais aussi mettre les images dans un répertoire à part, toujours dans la racine, sinon, ça va rapidement devenir le capharnaüm (mais ça fonctionnera quand même).
Le grand âge donne plus de sérénité, même s'il altère ou aère les neurones.

ps: et si on voyait ton code réel, un lien ?

Bonne continuation.
Bonjour,
très certainement un problème de chemin sur les images. Même les "" oubliés sur ton code ne les empêcheraient pas de s'afficher. Presque à chaque nouvelles images que je place, je me plante sur un JPG au lieu de jpg, un tiret en moins, une majuscule. Il faut aussi bien vérifier les chemins des images. Si par exemple tu veux cibler une image sur la racine, il faut écrire 
background-image:url("Images/Toto.jpg");

Le / ne doit pas être devant Images, c'est une erreur classique. Vas voir ce lien, très utile : 
https://www.alsacreations.com/astuce/lire/78-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html

Et oui, comme le précise allan, tu ne peux pas cibler deux fois body avec deux images de fond. Tu devrais aussi mettre les images dans un répertoire à part, toujours dans la racine, sinon, ça va rapidement devenir le capharnaüm (mais ça fonctionnera quand même). Ici, "Images" est un répertoire sur la racine.
Le grand âge donne plus de sérénité, même s'il altère ou aère les neurones.

ps: et si on voyait ton code réel, un lien ?

Bonne continuation.
Modifié par Bongota (22 May 2021 - 12:22)
Bonjour,

Merveilleux !
Avec des "quotes" tout fonctionne comme souhaité.

Un grand MERCI

Keep on rocking, les amis !
Meilleure solution
Sujet clos
Aller à