Question/problème : mettre 2 images [HTML & CSS]

26 mars 2017 à 15:37:27

Bonjour. Avant de commencer, j'aimerai vous mettre mon code HTML & CSS.

Code HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
	<title>La Baze | Accueil</title>
	<link rel="stylesheet" href="lesite.css"/>
   </head>
   <body>
     <img src="fond-images.jpg" alt="Image de fond"/>
     <img src="5.jpg" alt="Bannière"/>
   </body>
</html>

Code CSS :

body { 
  margin:0;
  padding:0;
  background: url(fond-livres.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; 
  background-size: cover; 
}

Déjà j'étais en galère pour essayer d'insérer une image (histoire d'emplacements et tout ça). Quand j'ai (enfin) réussi, j'étais tout content, maaaaaiiiiiiiiiissssss... Ma joie était de courte durée.

Je voulais mettre une autre image par dessus, mais le problème c'est que dans le fichier CSS, il y avait (je sais pas comment ça s'appelle) BODY au tout début. Et donc pour la deuxième image (qui était placée dans body) les paramètres CSS sont les même (chose que je veux pas). J'ai essayé avec les classes mais ça ne marche pas :

Code HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>La Baze | Accueil</title>
    <link rel="stylesheet" href="lesite.css"/>
   </head>
   <body>
     <img class="imgfond" src="fond-images.jpg alt="Image de fond"/>
     <img class="bannière" src="5.jpg" alt="Bannière"/>
   </body>
</html>

Code CSS :

.imgfond { 
  margin:0;
  padding:0;
  background-repeat:no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
  background-position:fixed;
}

Je voulais savoir si il n'y avait pas une solution (j'ai cherché sur Google mais les rares choses que j'ai trouvé étaient des choses que je ne comprenais pas). J'ai entendu parler de <div>, mais je ne sais pas si c'est la solution (en plus je ne sais pas l'utilisée).

Merci de vos réponses et n'hésitez pas à me demander si vous n'avez pas compris (car mes explications peuvent être floues).

PS : Essayez d'utiliser des mots pas trop compliqués parce que je suis encore un débutant et je ne risque de ne pas comprendre.

kev27

26 mars 2017 à 23:24:16

Salut ton problème viens du fait que tu structure mal , c'est à dire ton image de fond tu doit l'appliquer en background d'un block

Pour que se soit plus compréhensible regarde le code que je t'ai fait et imagine que les couleurs sont tes images.

https://codepen.io/anon/pen/NpBJZQ

La fainéantise est un vilain défaut

Nab baz

27 mars 2017 à 12:44:36

Salut @Kev27, déjà merci de ta réponse, mais je n'ai pas trop compris ce que tu m'as dis. C'est quoi cette balise <header> ? Et c'est quoi un bloc ?

kev27

27 mars 2017 à 18:31:09

Oula si tu me pose cette question c'est que tu n'as pas lu le cours html/css présent sur ce site, je t'invite donc à le suivre .

Juste pour te répondre : header = en tête , c'est une balise de type block dite structurante qui représente l'entête du site (banniere, logo, menu etc... peuvent ce trouver dedans).

Un block c'est un style de balise , il y en à 2 (les block, et les inlines)

inline exemple: <img src="" alt="">

block exemple: <header> contenu ici </header>

Voila mais je te conseil vivement de suivre le cours sinon tu n'avancera pas et personne ne t'aidera plus si tu fait pas l'effort de lire le cours en entier

La fainéantise est un vilain défaut