Aller au contenu

Fond site: problème de dimension?


stoups

Sujets conseillés

Bonsoir,

je me suis lancée dans la création d'un site web (que j'écris en HTML) et j'essaie de mettre un fond.

Mon fond fait (presque) le rapport 16:9, je l'ai agrandi alors il fait 32 cm par 18 cm à quelques dixièmes près.

J'ai écrit ma balise body comme suis:

<body style="background-image: url(http://image.noelshack.com/fichiers/2012/25/1340546916-fond_t_dfaut.jpg); background-repeat: no-repeat;"> .

L'image s'affiche comme elle devrait mais seul problème, j'aimerais bien que l'image prenne toute la page. Sans pour autant que les écrans 15" ne voit pas le site en tout petit...

Donc, voici ma question: quelles dimensions doit faire mon image? (actuellement elle fait 29,63 cm par 17,78 cm)

Merci pour vos réponses

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Tout d'abord deux choses :

1/ Oublie les centimètres. Sur le web, l'unité c'est le pixel. Une mesure en centimètres ne signifie rien du tout à l'écran, puisque la résolution varie d'un écran à l'autre.

2/ Oublie également ces histoires de 16/9 ou autres rapports : sur un écran de téléphone portable en mode portrait, la hauteur est plus grande que la largeur, sur un écran 16/9 c'est le contraire, mais dans tous les cas, il faut que le rendu reste correct pour tout le monde, donc il ne faut pas se focaliser sur un rapport précis.

Par défaut, une image de background conserve sa taille naturelle. Tu peux la redimensionner en utilisant la propriété background-size, à laquelle tu spécifies une ou deux valeurs (largeur et hauteur), ou bien une seule (dans ce cas la deuxième est ajustée automatiquement), dans ton ce serait donc :

background-size: 100%;

Ainsi l'image s'étalera sur toute la largeur de l'écran, et sa hauteur sera ajustée automatiquement par le navigateur afin que le ratio soit conservé.

Cependant :

1/ cette propriété ne fonctionne pas sur les anciennes versions d'Internet Explorer

2/ Si le rapport largeur/hauteur de l'écran est supérieur au rapport largeur/hauteur de l'image, il y aura du vide au-dessous de l'image.

Au final, vu que tous les écrans sont différents (rapport largeur/hauteur et résolution), il y a toujours un compromis à faire : soit on "remplit" l'écran avec l'image mais il faut accepter qu'elle soit rognée (ou bien déformée mais ça c'est bête), soit on affiche la totalité de l'image, et dans ce cas elle ne n'occupera pas la totalité de l'écran.

Sans pour autant que les écrans 15" ne voit pas le site en tout petit...

On parle d'une image de background : en aucun cas une image de background ne doit comporter de l'information utile au visiteur. Elle est là juste pour décorer. Si une image apporte une information en tant que telle, elle doit être placée dans une balise <img>. Et j'espère surtout que ton image ne contient pas du texte...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...