stoups Posté 24 Juin 2012 Partager Posté 24 Juin 2012 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 More sharing options...
Ernestine Posté 24 Juin 2012 Partager Posté 24 Juin 2012 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 More sharing options...
stephane2t Posté 25 Juin 2012 Partager Posté 25 Juin 2012 Emestine a tout dit, j'ajouterai juste un dernier truc : Oubliez ça : "<body style="background-image: url(http://image.noelsha...ond_t_dfaut.jpg); background-repeat: no-repeat;">" Le css ça se met dans une feuille de style à part, jamais dans le code. C'est moche, c'est difficile à maintenir et c'est pas du tout efficace Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant