Taille image pour background

bonjour,
je souhaite créer une image sous photoshop , l'aplatir , la récupérer en format .jpg pour ensuite la placer dans la balise html en tant que background:url(" ....jpg")
je la fixerai aussi

cette image sera donc le fond de ma page, j'ai fait quelques essais mais évidemment tout dépend de la résolution de l'écran. On ne voit pas tout ce qu'il faut sur un pc portable ou un pc fixe classique.

je ne réussis pas à trouver une logique, un bon compromis

déjà quelle taille donner à mon fichier .psd ?

merci

Salut,

Comme dit le tuto, enregistre en 2500x1300 tout en veillant à optimiser le poids (s'agit pas d'aller mettre une image à 1Mo.
Puis dans le CSS :

html { 
  margin:0;
  padding:0;
  background: url(...jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

ou la solution javascript...

merci
je n'avais pas vu ce tuto

Bonjour,

Sympa, mais reste limité aux navigateurs très récents, d'après le tuto...

@+

Jason a écrit :
Bonjour,

Sympa, mais reste limité aux navigateurs très récents, d'après le tuto...

@+

Relis-le la solution javascript corrige cela

a écrit :
Relis-le la solution javascript corrige cela

Oui, avec un code de 2 kms pour un simple background et à condition encore que le Javascript ne soit pas désactivé...

Bonjour,
Il y a aussi un moyen amusant qui consiste à mettre un "faux" arrière plan extensible… Il faut juste mettre une div en position absolute ou fixed en tout début du body, l'image posée dedans en largeur 100% - Puis de construire sa page par dessus :
Voir un exemple ici :
http://gilloo.86600.fr/image-de-fond-extensible/index.php
Et voir le code source :
view-source:http://gilloo.86600.fr/image-de-fond-extensible/index.php
Je trouve ça marrant comme effet !
__________________________________________________
PS : les adresses commençant par view-source ne sont pas supportées par tous les navigateurs… Vous allez peut-être devoir consulter le code source de manière classique.

a écrit :
Je trouve ça marrant comme effet !

Sauf erreur de ma part, un background fixe dans le Body donnera la même chose...

Effectivement, il y a erreur de ta part - Un background fixe ne s'adapte pas à la taille de la fenêtre - Amuses toi à modifier la taille de la fenêtre navigateur.

Sur cette capture d'écran on se rend bien compte :

Photo Dropbox
Modifié par Aureance (12 Jun 2012 - 18:13)