Netophonix - Le forum

Un petit univers pour les aventures, series, sketch en mp3 libre sur le net. Informez-vous et discutez sur toutes les sagas mp3.
Nous sommes actuellement le Mar 19 Mars 2024, 12:56
Rechercher dans tout le forum :

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Publier un nouveau sujet Répondre au sujet  [ 13 messages ] 
Auteur Message
Message Publié : Mer 20 Juil 2011, 11:51  −  Sujet du message : Image en background
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 28 ans · 235 posts
Inscription : 11 Septembre 10
A travaillé sur :
Des monos plus vraiment disponibles
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 :smt022

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 :)


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:16  −  Sujet du message : Re: image en background
Répondre en citant
Netophoniste
Netophoniste
Avatar de l’utilisateur
Masculin4792 posts
Inscription : 21 Janvier 07
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.

→ Carton poussiéreux.

:}


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:18  −  Sujet du message : Re: image en background
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 28 ans · 235 posts
Inscription : 11 Septembre 10
A travaillé sur :
Des monos plus vraiment disponibles
Ok ... Bah merci à toi, Kak !
Tu peux fermer ce sujet :)


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:26  −  Sujet du message : Re: image en background
Répondre en citant
Créateur
Créateur
Masculin 78 ans · 791 posts
Inscription : 11 Janvier 08
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 :D. 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.


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:27  −  Sujet du message : Re: image en background
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 29 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
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 :D


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:34  −  Sujet du message : Re: Image en background
Répondre en citant
Netophoniste
Netophoniste
Avatar de l’utilisateur
Masculin4792 posts
Inscription : 21 Janvier 07
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.

→ Carton poussiéreux.

:}


Dernière édition par Kak Miortvi Pengvin le Mer 20 Juil 2011, 12:38, édité 1 fois.
Vérification des propriétés CSS.


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:40  −  Sujet du message : Re: Image en background
Répondre en citant
Neto-Rédacteur
Neto-Rédacteur
Avatar de l’utilisateur
Masculin 29 ans · 1188 posts
Inscription : 5 Août 09
A travaillé sur :
J'ai une page Netowiki je crois. Vas voir ;-).
Ah oui tiens :D

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


Dernière édition par Bardyl le Mer 20 Juil 2011, 12:47, édité 1 fois.

Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:45  −  Sujet du message : Re: Image en background
Répondre en citant
Netophoniste
Netophoniste
Avatar de l’utilisateur
Masculin4792 posts
Inscription : 21 Janvier 07
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.

→ Carton poussiéreux.

:}


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 12:47  −  Sujet du message : Re: Image en background
Répondre en citant
Neto-technicien
Neto-technicien
Avatar de l’utilisateur
Masculin 34 ans · 439 posts
Inscription : 11 Mars 08
A travaillé sur :
le NetoWiki
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.

Avatar par yamiyonofen sur DeviantArt.


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 13:05  −  Sujet du message : Re: Image en background
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 28 ans · 235 posts
Inscription : 11 Septembre 10
A travaillé sur :
Des monos plus vraiment disponibles
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"


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 13:15  −  Sujet du message : Re: Image en background
Répondre en citant
Netophoniste
Netophoniste
Avatar de l’utilisateur
Masculin4792 posts
Inscription : 21 Janvier 07
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.

→ Carton poussiéreux.

:}


Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 13:24  −  Sujet du message : Re: Image en background
Répondre en citant
Créateur
Créateur
Avatar de l’utilisateur
Masculin 28 ans · 235 posts
Inscription : 11 Septembre 10
A travaillé sur :
Des monos plus vraiment disponibles
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 !!!!


Dernière édition par Kosmos le Mer 20 Juil 2011, 13:27, édité 1 fois.

Haut
 Profil  
 
Message Publié : Mer 20 Juil 2011, 13:26  −  Sujet du message : Re: Image en background
Répondre en citant
Neto-technicien
Neto-technicien
Avatar de l’utilisateur
Masculin 34 ans · 439 posts
Inscription : 11 Mars 08
A travaillé sur :
le NetoWiki
Si chez certains, c'est l'arbre qui cache la forêt, ici c'est la forêt qui cache le site. :D
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)

Avatar par yamiyonofen sur DeviantArt.


Haut
 Profil  
 
Afficher les messages publiés depuis:  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 13 messages ] 

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 0 invités


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas transférer de pièces jointes dans ce forum

Rechercher :
Atteindre:  
cron


Powered by phpBB © 2000-2007 phpBB Group
Traduction française officielle © Maël Soucaze
[ Time : 0.113s | 18 Queries | GZIP : Off ]