Partage

Background-image étiré

Sujet résolu
16 janvier 2013 à 3:01:53

Bonsoir,

Je cherche à étirer une image sur la totalité de la page (l'image est très grande). Le but c'est de faire la bordure de la page avec une image, c'est-à-dire comme sur le siteduzero.com en couleur marron par exemple. J'ai reussi à le faire avec les couleurs mais je ne parviens pas à le faire avec une image. le but est de biensur de ne pas réaliser une mosaique.

Malgré mes nombreuses recherches je n'ai pas trouvé de solution satisfaisante: Les tableaux, le "bidoullage" css, .. ne fonctionnent pas. De nombreux posts sont sur le net mais aucun ne parvient à donner une réponse clair et surtout fonctionnel.

!!!!! Je désespère !!!!!!!!

Même juste un indice s'il vous plait!

Merci d'avance !!

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
16 janvier 2013 à 6:09:52

Quelle taille fait ton image ? As-tu essayé d'aggrandir son format ?
16 janvier 2013 à 6:31:53

La taille est de 1200*900. Je ne pensais pas faire ainsi car mon site est suceptible de changer de taille mais je vais essayé faute de proposer mieux. L'idée est pas mal.

Merci beaucoup Brokenail. Je vous tiens au courant.

16 janvier 2013 à 6:37:49

L'image est toujours trop petite avec une taille de 4000*3000. Je pensais passé à superieur mais pour arriver à tout couvrir le fichier ferait 65 GB..... ;-(
16 janvier 2013 à 7:24:17

pommeace a écrit:

L'image est toujours trop petite avec une taille de 4000*3000.

Oulla mais c'est quoi que tu a comme écran ? un LCD 40" ?? Tu est sur que tu n'a pas un "max-width" qui se promene quelque part ? sur ton "body" ou une autre balise contenant ton image ??

D'après tout ce que j'ai pu lire et voir, la meilleur paratique est effectivement de creer une grosse image (au moins 1920px de large) et de l'affecter en tant que background de ton "body", de cette maniere l'image devrait s'étirer toute seul, et tu ne risque pas une trop grosse perte de qualité sur les très grand écrans.

16 janvier 2013 à 7:31:08

Sur le site du zéro et comme sur pas mal de site c'est une image de petite taille qui se répète (en mosaïque donc).

Si malgré ça tu veux toujours "étirer" ton image, alors essaie de voir du côté de la propriété CSS background-size.

body {
    background: url('mon_image.png') no-repeat;
    background-size: 100%;
}



16 janvier 2013 à 8:28:59

oups c'est pas totalement faux. Avec vos réponse ca marche juste parfaitement!

Merci à vous deux. Ca fait vraiment plaisir! xD

Background-image étiré

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown