| Netophonix - Le forum https://forum.netophonix.com:443/ |
|
| Image en background https://forum.netophonix.com:443/viewtopic.php?f=23&t=11670 |
Page 1 sur 1 |
| Auteur: | Kosmos [ Mer 20 Juil 2011, 11:51 ] |
| Sujet du message: | Image en background |
Bonjour à tous  Voilà, j'ai un problème sur mon site: quand je veux mettre une image en fond (background), l'image est trop petite et se répète. Et quand je l'agrandis, évidemment, l'image se pixellise  Donc voilà, j'aimerais savoir s'il existe une balise CSS qui fait en sorte que l'image choisie prenne toute la surface de la page web sans être pixelliser à s'en faire mal aux yeux. Merci pour ovs futurs réponses
|
|
| Auteur: | Kak Miortvi Pengvin [ Mer 20 Juil 2011, 12:16 ] |
| Sujet du message: | Re: image en background |
La magie. A part ça, il n'est pas possible de résoudre ton problème. A la limite, selon l'image, il est possible de tricher. Et si tu en choisis une plus grande, la page sera lourde et pénible à charger à cause de cette image. |
|
| Auteur: | Kosmos [ Mer 20 Juil 2011, 12:18 ] |
| Sujet du message: | Re: image en background |
Ok ... Bah merci à toi, Kak ! Tu peux fermer ce sujet
|
|
| Auteur: | Olta [ Mer 20 Juil 2011, 12:26 ] |
| Sujet du message: | Re: image en background |
Kak Miortvi Pengvin a écrit: La magie. A part ça, il n'est pas possible de résoudre ton problème. Ah... Pas tout à fait, mon cher Kak  . Il existe une méthode pour agrandir une image à l'infini sans pour autant la dégrader : la vectorisation. Seulement, cette technique ne marche principalement que sur les dessins, car elle oblige à repasser l'image en noir et blanc. Ça plus une petite étape de colorisation, et tu as une image aux dimensions de ton choix.Je te donne comme exemple les illustrations de mon site. Je suis passé par Inkscape pour la vectorisation, et GIMP pour le nettoyage des dessins papier. |
|
| Auteur: | Bardyl [ Mer 20 Juil 2011, 12:27 ] |
| Sujet du message: | Re: image en background |
Lorsque tu utilises une image, dans ton code CSS tu as plusieurs possibilités : - Que ça fasse une mosaique en utilisant aucune autre balise que "background image:url(../images/tonimage.truc)" ; - Que ton image ne se répete pas avec "background-repeat:no-repeat". Dans ce cas là, elle n'apparaitra qu'une seule fois... - Que ton image ne se répête pas et que tu la place un peu là ou tu veux avec : "background-position:x% y%" (ou x et y sont respectivement les abcisses et ordonnées du placement de l'image) ; Comme tu le vois, toutes ces balises ne te permettent pas d'étirer une image sans que des gros pixels moches n’apparaissent... Ce que je te conseille pour le coup, c'est de la refaire aux dimensions de ta page web et d'appliquer les balises ci-dessus afin qu'elle ne s'étire ni ne bouge en fonction de la résolution ou niveau de zoom des visiteurs de ton site Néanmoins, il existe des balises qui te permettront de redimensionner ton image en ajoutant des valeurs width="nombre_de_pixels" et height="nombre_de_pixels". Ton image sera redimensionnée mais suivant la taille de base, tu verras apparaître des gros carrés ou en tout cas, si tu veux un site propre, ça sera pas super tip top. A toi de gerer avec tout ça, t'as tous les outils pour EDIT : grilled par Kak et totale aproove d'Alosta mais ça devient autre chose plus compliqué quoi après
|
|
| Auteur: | Kak Miortvi Pengvin [ Mer 20 Juil 2011, 12:34 ] |
| Sujet du message: | Re: Image en background |
Hey dîtes, la vectorisation je connais quand même hein. Sauf que le support est encore loin d'être parfait dans tous les navigateurs et que l'utilisation et la création d'une image vectorielle est encore loin d'être à la portée de tout le monde. |
|
| Auteur: | Bardyl [ Mer 20 Juil 2011, 12:40 ] |
| Sujet du message: | Re: Image en background |
Ah oui tiens Mais il existe des méthodes permettant de passer du .svg au .png logiquement, il me semble même qu'une option d'inkscape le fait très bien (à vérifier). EDIT : Après vérification, il semblerait que les images .svg marchent selon les navigateurs... safari les prendrait en compte... En tout cas une chose est sur, l’utilisation des fichiers .svg en tant que background-image n'est pas standard... 
|
|
| Auteur: | Kak Miortvi Pengvin [ Mer 20 Juil 2011, 12:45 ] |
| Sujet du message: | Re: Image en background |
Oui mais un export en bitmap te fait justement perdre le principal intérêt de la vectorisation. Cet article (en anglais) permettra aux curieux d'en savoir plus sur l'utilisation du SVG dans une page. |
|
| Auteur: | Aquatikelfik [ Mer 20 Juil 2011, 12:47 ] |
| Sujet du message: | Re: Image en background |
Il y a un récent tuto d'Alsacréations qui parle des arrière-plan extensibles. Cependant, comme tu le vois, les images d'arrière plan sont ici utilisées pour des cas particulier. En mettre un, juste parce qu'on veux en mettre un sans en avoir l'utilité, le résultat à des chances d'être médiocre. Quand au vectoriel, en plus de n'être utilisable que dans les navigateurs récents, je vois mal sa place pour un arrière-plan. La méthode Les Experts à Miami pour agrandir proprement une image n'existe pas. |
|
| Auteur: | Kosmos [ Mer 20 Juil 2011, 13:05 ] |
| Sujet du message: | Re: Image en background |
Eh bien, j'ai trouvé un truc, mais ça me donne ça: http://lecerfledruideetleloup.franceserv.com/ L'image, ça va, mais on ne voit plus le texte (qui apparait une demi seconde au début). Je me suis aidé de ça: http://css-tricks.com/3458-perfect-full ... und-image/ avec la méthode "CSS-Only Technique #2" |
|
| Auteur: | Kak Miortvi Pengvin [ Mer 20 Juil 2011, 13:15 ] |
| Sujet du message: | Re: Image en background |
Ton image de départ fait 450 × 338 pixels contre par exemple 1265 × 664 pour l'espace d'affichage sur ma fenêtre. Il est évident que si tu l'étires environ trois fois selon les deux axes, tu vas te retrouver avec une image moche quelque soit la technique. Là, il n'y a que deux possibilité. Soit tu as une image réellement grande et parfaitement compressée et tu pourras l'utiliser selon les méthodes d'AlsaCréations. Soit tu utilises une image vectorielle comme le conseillait Alosta. Mais les solutions intermédiaires ne sont que magiques. |
|
| Auteur: | Kosmos [ Mer 20 Juil 2011, 13:24 ] |
| Sujet du message: | Re: Image en background |
Bon, je crois avoir réussit : http://www.lecerfledruideetleloup.franceserv.com/ !!! Merci à vous tous, surtout Aquatikelfik grâce à qui j'ai put trouve le site avec qui j'ai fait ça !!!! |
|
| Auteur: | Aquatikelfik [ Mer 20 Juil 2011, 13:26 ] |
| Sujet du message: | Re: Image en background |
Si chez certains, c'est l'arbre qui cache la forêt, ici c'est la forêt qui cache le site. Faut pas confondre image et background. Là, tu utilises juste une astuce pour afficher l'image comme une image de fond. Et même en dehors de ça, faut revoir tout ton code source... Des tas de balises ouvertes et jamais fermées voire utilisées à mauvais escient. Pour en revenir à ton soucis d'arrière-plan, une forêt, oui, ça peux le faire, mais il t'en faudra une largement plus grande. Ne pas oublier que des visiteurs pourraient avoir un écran de 3000x2000px. Vectoriser une photo faut pas y songer, y'a des chances que ça donne un effet cartoon, loin de l'effet escompté. (écrit avant la réponse précédente) |
|
| Page 1 sur 1 | Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été] |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|
