Discussion :

[spectre666]

Bonjour à tous,

Et bien je me lance en espérant dès le début ne pas 'saouler' les anciens de questions récurrentes.

Cela fait quelques temps que je souhaite créer un site pour tester mes capacités. Et je me heurte déjà à un souci.

J'avais dans l'idée de mettre une image "de fond" sur laquelle je poserais d'autres éléments.

Néanmoins je souhaite que l'image de fond s'adapte à tous les types de fenêtres et résolution d'écran.

J'ai été sur pas mal de sites regarder les FAQ/conseils et tutoriels mais je n'arrive toujours pas à m'en sortir.

Je précise que je pose cette question dans la section CSS car j'ai voulut utiliser une simple balise HTML :

Code html :

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

1
2
<div class="fond">
	<img src="Fond.jpg" alt=Erreur de chargement>

Et par la suite le définir comme vu dans un des tutos avec le div :

Code css :

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

1
2
3
4
5
.fond
{
  margin-left: 1%;
  margin-right: 1%;
}

Seulement voila les soucis :

- Je suis totalement perdu après plusieurs heures avec des méthodes différentes sur quasiment chaque site ...
- Je ne sais toujours pas quelles balises utilisées ... ni en quel langage

Donc si une âme charitable peut éclaircir ma lanterne que j'arrête de piétiner alors que j'arrive à faire des choses beaucoup plus complexe ...

[Erwan31]

Bonjour,
une image de fond, c'est-à-dire le plus souvent décorative, n'apporte en règle
général aucune information crutiale et se placent derrière un contenu, elle
devrait donc être appelée via un background CSS.

Si ton but est d'étirer ton image pour qu'elle s'adapte à la résolution de
l'utilisateur, alors tu ne peux pas le gérer en CSS (sauf peut-être via
Javascript). La question est déjà de savoir si cette image peut être étirée sans
dégradation majeure, ce qui est rarement le cas.

[spectre666]

Bonjour,
une image de fond, c'est-à-dire le plus souvent décorative, n'apporte en règle
général aucune information crutiale et se placent derrière un contenu, elle
devrait donc être appelée via un background CSS.

Si ton but est d'étirer ton image pour qu'elle s'adapte à la résolution de
l'utilisateur, alors tu ne peux pas le gérer en CSS (sauf peut-être via
Javascript). La question est déjà de savoir si cette image peut être étirée sans
dégradation majeure, ce qui est rarement le cas.

Ok, réponse claire et précise, l'idée de la passer en background m'était venu en effet (et je l'ai même testé avec plus ou moins de succès)

Concernant l'image ça n'est pas un fond uni donc oui l'étirer serait mauvais néanmoins, elle aurait une valeur max.
Je veux juste qu'un petit écran puisse la voir correctement et qu'elle est une taille max pour les gros ecrans qui ne rempliraient pas bien sûr celui ci.

Concernant le JavaScript, je ne souhaite pas m'y mettre pour le moment j'aimerais rester en html/css avec intégration dans le futur de PhP et peut être un jour si j'ai le temps étudier plus en détail le Javascript.

Néanmoins j'avais lut sur plusieurs sites qu'il était possible de gérer (on va dire now background) l'image en background par le CSS.

[Erwan31]

Si tu veux pouvoir contrôler la taille de ton image (largeur maximale etc) tu dois
alors passer par une image HTML (avec un alt vide) sortie du flux normal grace
à un positionnement absolue. Il te faudra ensuite attribuer un positionnement
relatif au contenu qui doit passer dessus pour qu'il puisse passer en premier plan
via un z-index de 2 ou plus.
Ceci dit je n'ai mais testé cette possibilité, donc tester sur les principaux navigateurs.

[Floriang33]

Le ALT vide ne changera rien au changement de flux et au contrôle des couches donc il est préfère qu'il en mette un.

Au cas où tu ait pas compris, je vais essayer de t'expliquer ce que Erwan31 a voulu te dire.

Il te dit que tu vas devoir mettre ton image avec une position absolue (dans le css position:absolute;), qui la met dans un flux supérieur donc par dessus toute division qui ce présentera au même endroit sur ta page (ce qui fait que tu la verra pas car ton image sera devant). Tu vas donc gérer cette superposition. Pour ça tu vas devoir utiliser la balise z-index dans ton css. Ton index le plus petit est en dessous. Tu mettras donc ton image avec un index de 1 et tes parties supérieures avec des index croissants.

Toute fois, ce fond, ce sera le fond de tout ton site??

[Erwan31]

Le ALT vide ne changera rien au changement de flux et au contrôle des couches donc il est préfère qu'il en mette un.

Oui je sais bien, c'était juste une indication pour ne pas omettre de l'ajouter et puis vide car dans la majorité des cas une image de fond n'apporte aucune information.

[Floriang33]

Oui je sais bien, c'était juste une indication pour ne pas omettre de l'ajouter et puis vide car dans la majorité des cas une image de fond n'apporte aucune information.

Une image n'apporte aucune information mais un non-voyant naviguant avec Lynx il verra qu'il y a un objet donc il va regarder et ne sera pas ce qui est représenté. C'est pour ça que dans alt on met une description des images ou lien. Ca permet une meilleure navigation au handicapés utilisant Lynx ou encore JAWS.
De plus lorsque l'image n'est pas trouvée, c'est le alt qui s'affiche et non le title. Je trouve avantageux d'avoir un outil comme celui-là.

[Erwan31]

Une image n'apporte aucune information mais un non-voyant naviguant avec Lynx il verra qu'il y a un objet donc il va regarder et ne sera pas ce qui est représenté. C'est pour ça que dans alt on met une description des images ou lien. Ca permet une meilleure navigation au handicapés utilisant Lynx ou encore JAWS.

Oui et non, contrairement aux lecteurs d'écrans, la présence d'une image n'est pas signalée par Lynx, celui-ci n'affichera le contenu du alt que s'il est présent.
Cela ne remet de toute façon pas en cause le fait que la description d'une image, quelque soit son statut, n'est pas obligatoire et qu'elle dépend en premier lieu des intentions de l'auteur. D'un point de vue très pragmatique, l'essentiel est de s'assurer qu'il n'y a pas de perte d'information nécessaire à la compréhension du contenu.
D'autre part ne pas oublier que l'alternative textuelle est intégrée dans le flux de texte du document à l'endroit ou elle se trouve dans le code, sa lecture ou son affichage ne doit donc pas venir perturber la cohérence rédactionnelle.

De plus lorsque l'image n'est pas trouvée, c'est le alt qui s'affiche et non le title. Je trouve avantageux d'avoir un outil comme celui-là.

Le title sur une image n'a pas la même fonction de l'attribut alt, il sert plutôt à afficher des metadonnées...