Netophonix - Le forum

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

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.

Ok ... Bah merci à toi, Kak !
Tu peux fermer ce sujet

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.

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

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.

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...

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.

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.

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"

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.

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 !!!!

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)