Discussion :

[Dsphinx]

Bonjour,

J'ai une image que je dois mettre en arrière plan sur un site. Cette image est énorme 4803x3202px et le client voudrait qu'elle soit sur tout l'arrière plan du site. Je ne peux pas la redimensionner à 1280x1024 (résolution moyenne) car il existe des résolution plus grande avec les écran 22" et 24" et je ne peux non-plus pas la mettre à 4803x3202 car bien trop lourde...

Quelle est le meilleur moyen pour mettre une grande image en arrière-plan de façon propre en CSS ?

Merci.

[kohsaka]

de manière propre ou pas propre, si ton image doit faire 4803x3202px, elle sera toujours lourde

pour mettre une image en fond t'utilises background :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body {
  background: url(blablabla.png) no-repeat center top;
}

[Dsphinx]

Merci de ta réponse... Le code que tu m'as mis je le connais ainsi que les propriétés. De mon coté je me souvent des images background mais petites en repeat-y ou repeat-x...

Je voulais juste savoir quelle était le moyen le plus propre pour mettre une grande en arrière plan ?

[Macmillenium]

Bonjour,

A quoi ressemble ton image ?

[Dsphinx]

L'image est un fond texturé non duplicable car il y a un dégradé progressif vers l'intérieur... Je vais encore tester des tailles d'écran...

[youri89]

Tu peux pas mettre ton image en 1280x1024 et combler le reste avec un couleur de fond correspondant au bord de ton image ?

Tu utilises un background Color et tu mets un div centrer avec ton image avec un Z-index = 1

Pour les écrans en 1280x1024, ils ont l'image et pour les résolutions plus grandes, ils ont l'impression d'avoir un dégradé juste au milieu de l'image.
Sinon avec une bagkground de 4803x3202px, ça va faire bizarre pour ceux qui sont en 1280x...

[Dsphinx]

Excellente déduction Youri89.... Je vais y aller comme ça..

Merci...

[devyan]

Salut,

Sinon tu dois pouvoir diminuer le temps de chargement en faisant des essais de compression de ton image (en faisant un JPEG et en utilisant la compression maximum qui te donne un rendu satisfaisant pour ton image de fond)

devyan.

[Macmillenium]

Tu utilises un background Color et tu mets un div centrer avec ton image avec un Z-index = 1

Pas besoin d'une autre div, un background-image sur le body fera l'affaire

[youri89]

Oui, effectivement.

J'ai jamais utilisé pour le body un background image et un background color en même temps.

En général, j'ai un fond pour le body (couleur ou image "répétitive") qui s'ajuste à la taille de l'écran et un fond différent (image ou couleur) pour la div "container" qui est centré et qui contient la page du site. Elle fait en général 1000 px de large.

[Macmillenium]

J'ai jamais utilisé pour le body un background image et un background color en même temps.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
body { background:#000 url(image.gif) no-repeat; }

Tu peux donc utiliser background-image et background-color en même temps.

Elle fait en général 1000 px de large.

Avec 1000px de largeur tu déclenches une scrollbar horizontale sur les résolutions 1024 et inférieurs.