Adaptation du fond. [Résolu]

Akiro2425 · 30/12/2010, 12h24

Bonjour,

voilà, j'ai un petit souci.

J'aimerai qu'une image s'adapte aux résolutions des internautes, le problème c'est que je n'arrive pas à le faire...
Je vous met le code en espérant que vous puissiez m'aider.

Code :

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

1
2
3
4
5
6
body
{
background: url(http://img522.imageshack.us/img522/4488/fondni.png) no-repeat;
width:100%;
margin:0;
}

Merci d'avance.

Cordialement Akiro.

thelvin · 30/12/2010, 22h38

Hélas ce n'est pas facilement possible.

Une idée est de prévoir plusieurs images de fond pour plusieurs résolutions, de mettre dans la CSS une image "pas trop mal" pour tout, et d'affiner avec du JavaScript si nécessaire, au cas où JavaScript soit dispo.

(Au fait, personnellement, j'estime qu'une image suffisamment importante pour qu'on veuille l'afficher de telle ou telle manière, n'est pas une image de fond mais du contenu avec <img>. Et si tu la faisais simplement de bonne taille, centrée, avec la couleur unie qui jure pas à côté ?)

Akiro2425 · 31/12/2010, 12h13

Merci de cet réponse.

Et effectivement je vais pas me compliquer et je vais faire un dégradé qui par de mon image et devient noir ou une autre couleur.

Dans ce cas je vais pouvoir le mettre en résolu

Merci.

Cordialement Akiro.

e-fitz · 01/01/2011, 17h32

Bonjour,

une astuce qui fonctionne en général, pour le html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<div class="fond_de_page">
<img src="mon_image_de_fond.jpg" width="100%" height="100%" alt="Mon fond" />
</div>
<div class="page_concrete">
 
Ici le vrai contenu...
 
</div>
</body>

pour le css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
html{
  width:100%;
  height:100%;
}
 
body{
  width:100%;
  height:100%;
}
 
.fond_de_page{
  position:relative;
  z-index:0;
  width:100%;
  height:100%;
}
 
.page_concrete{
  position:relative;
  z-index:1;
}

L'idée est donc de mettre une vrai image (balise <img>) qui s'adapte à la taille du contenu, et donc un contenu qui prend la taille de l'écran.

Ensuite, on met le contenu du site par dessus et donc cela passe pour une image de fond.

J'ai ajouté des propriétés dans body et html pour éviter les bugs de width:100% et height:100% dans ie.

Toutefois je n'ai pas pris le temps de tester ce bout de code il faudra donc peut etre un peu adapter/corriger.

Bonne journée

30/12/2010, 22h38	#2
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 049 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 049 Points : 6 962 Points : 6 962	Hélas ce n'est pas facilement possible. Une idée est de prévoir plusieurs images de fond pour plusieurs résolutions, de mettre dans la CSS une image "pas trop mal" pour tout, et d'affiner avec du JavaScript si nécessaire, au cas où JavaScript soit dispo. (Au fait, personnellement, j'estime qu'une image suffisamment importante pour qu'on veuille l'afficher de telle ou telle manière, n'est pas une image de fond mais du contenu avec <img>. Et si tu la faisais simplement de bonne taille, centrée, avec la couleur unie qui jure pas à côté ?)
	00

31/12/2010, 12h13	#3
Akiro2425 Invité de passage Karim Saadani Étudiant Inscription : octobre 2010 Messages : 2 Détails du profil Informations personnelles : Nom : Karim Saadani Informations professionnelles : Activité : Étudiant Informations forums : Inscription : octobre 2010 Messages : 2 Points : 1 Points : 1	Merci de cet réponse. Et effectivement je vais pas me compliquer et je vais faire un dégradé qui par de mon image et devient noir ou une autre couleur. Dans ce cas je vais pouvoir le mettre en résolu Merci. Cordialement Akiro.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email