Discussion :

[Tamzoro]

Bonjour,

En m’exerçant à créer des petits sites Internet afin d'améliorer mon niveau CSS, je rencontre un petit soucis.

Lorsque j'ajoute une image grise en dessous de ma bannière, je constate que je perds des pixels,je ne sais pas vraiment pourquoi?



Comment faire pour arriver à ce genre de résultat-ci ?



Voici une petite idée de mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.fond_gris{
  height: 70px;
  width: 100%;
  margin-top: 3px;
 
}

[NoSmoking]

Bonjour,

Lorsque j'ajoute une image grise en dessous de ma bannière,

dans ce cas l'image devrait être en background-image, ce qui n'est visiblement^* pas le cas ici.

^*mais bon j'ai la vue qui baisse !!!

[Tamzoro]

Bonsoir,

Effectivement ça fonctionne, merci... Il est mieux d'utiliser background-image lorsque je souhaite inclure une image dans mon site ?
Le <img class="...." src="images/...jpg"/> n'est pas bon ?

[NoSmoking]

Pour faire simple
• Si ton image est purement décorative, en gros si elle n'est pas là on ne s'en rend même pas compte, alors on la place en background.
• Si ton image apporte au contenu, voire est importante pour la compréhension, alors on la place dans une balise <image>, exemple si l'on écrit dans la page « voir le schéma », le schéma sera placé dans une balise <image>.

[Invité]

Bonjour,

un peu de LECTURE :

• balise <img>
• CSS - background-image

Pour étoffer ce que dit NoSmoking :

1- la balise <img> :

• sert pour toute photo qui "apporte du contenu" à la page.
• on peut/doit lui appliquer un attribut alt="..." : texte "alternatif", si l'image n'est pas trouvée
• l'attribut title="..." permet de décrire ce que l'image contient : important pour les mal-voyants, par exemple

2- background-image

• sert pour tout visuel n'ayant pas d'importance en terme de "contenu" : les arrière-plans (évidemment), icônes, images décoratives...
• C'est-à-dire qu'on peut les enlever sans changer le sens, la signification du contenu

[Tamzoro]

Bonsoir,

Merci beaucoup pour vos explications, j'ai compris.