[résolu]Image background(Lxh)

[Nogi]

Bonsoir,

 

J'ai une image que je veux utilisé en bckgnd, de 1600px X 1200px. Ma résolution d'écran est 1024 x 768. Bien entendu, lorsque l'image apparaît, il manque une partie.

 

Est ce que je devrais réduire l'image à 1024/768? Et qu'arrivera-t-il pour ceux qui ont une plus haute résolution(Lxh) que la mienne?

 

Voici mon code CSS :

 

body
{
  background-image: url("u:/ur(webie6)/ur099.jpg"); 
  background-position: center center;
  background-attachment: fixed; 
  background-repeat: no-repeat;   
}

 

Merci de votre aide!

 

Nogi

Modifié le 1 avril 2008 par Nogi

[KewlCat]

Et qu'arrivera-t-il pour ceux qui ont une plus haute résolution(Lxh) que la mienne?

Si tu mets une petite background-image en no-repeat dans un bloc, le reste du bloc non occupé par l'image sera rempli de la couleur du background-color.

 

Au passage, avec une url qui commence par "u:/", tu vas être le seul à voir cette image de fond...

[Dylav]

Q. : J’ai de la misère avec l’adresse « relative » d’une photo. Présentement, je travaille avec une absolue, alors, quelle serait selon vous, l’adresse relative de : url(u:/ur(webie6)/ur099.jpg)

body {
 background : black url(u:/ur(webie6)/ur099.jpg) center center fixed no-repeat;
}

Je suppose qu'à ton lecteur U est attaché un disque dur, ou une partition d'un disque dur. Ton image ur099.jpg est donc installée dans le répertoire ur(webie6) implanté directement à la racine de ton disque, et son adresse absolue est donc bien u:/ur(webie6)/ur099.jpg

 

Lorsque l'on parle d'adresse relative, c'est qu'on décrit le chemin qui sépare l'observateur de sa cible. Dans ton cas, l'observateur, c'est la clause de style qui invoque ton image (la cible), et il va donc falloir décrire le chemin relatif qui mène de la clause de style à l'image, ou plus exactement du répertoire contenant la clause de style à celui contenant l'image.

Supposons que la clause de style soit décrite dans l'entête d'une page HTML nogi.html implantée dans le même répertoire ur(webie6) que l'image ur099.jpg, l'adresse relative sera tout simplement url(ur099.jpg).

 

Un petit piège où il ne faut pas tomber : si tu as externé la feuille de style où est invoquée l'image (dans un fichier StyleNogi.css, par exemple), l'adresse relative décrira le chemin qui sépare la feuille de style (et non la page HTML utilisant la feuille de style) de l'image (pour des raisons de classement des divers éléments de ton site, tu n'auras pas forcément rangé dans le même répertoire la feuille de style et la page HTML).

 

Parlons enfin de ton lecteur U. Comme te le faisait remarquer KewlCat, tu es le seul à y accéder. Lorsque tu mettras ta page HTML en œuvre sur un serveur, n'oublie pas d'y implanter également une copie de ton image (et c'est cette copie qu'il faudra adresser dans la feuille de style), afin que les visiteurs de ton site puissent la voir en de fond de page

[Nogi]

Bonsoir,

 

Mon disque dur étant partitionné, ce que je fait présentement est dans la partie U:\ .....

 

U:\ur(webie6)\style.css

 

Justement, les pages .html sont dans le dossier ur(webie6) et ma feuille de style(.css),

dans le sous-dossier style.css!

 

J'ai essayé: url("../ur099.jpg"), dans ma feuille .css et ça fonctionne! Parce que

j'avoue que c'est encore un peu abstrait.

 

Source: [url="http://fr.wikibooks.org/wiki/Programmation_HTML/Liens#Liens_relatifs:"]http://fr.wikibooks.org/wiki/Programmation...Liens_relatifs:[/url]
(....)
" Si le fichier se trouve dans le répertoire parent du répertoire actuel, ou dans un sous-répertoire 
du répertoire parent, il faut « remonter » à l'aide de deux points « .. ». "
(....)
" Un petit piège où il ne faut pas tomber : si tu as externé la feuille de style où est invoquée l'image 
(dans un fichier StyleNogi.css, par exemple), l'adresse relative décrira le chemin qui sépare la feuille 
de style (et non la page HTML utilisant la feuille de style) de l'image (pour des raisons de classement 
des divers éléments de ton site, tu n'auras pas forcément rangé dans le même répertoire la feuille de 
style et la page HTML). "

 

" Parlons enfin de ton lecteur U. Comme te le faisait remarquer KewlCat, tu es le seul à y accéder. 
Lorsque tu mettras ta page HTML en œuvre sur un serveur, n'oublie pas d'y implanter également 
une copie de ton image (et c'est cette copie qu'il faudra adresser dans la feuille de style), afin 
que les visiteurs de ton site puissent la voir en de fond de page. "

 

Quand je serai rendu-là, je vous redemanderais surement conseil(s), le cas échéant.

 

Merci!

 

Nogi

[Dylav]

Un petit piège où il ne faut pas tomber : si tu as externé la feuille de style où est invoquée l'image (dans un fichier StyleNogi.css, par exemple), l'adresse relative décrira le chemin qui sépare la feuille de style (et non la page HTML utilisant la feuille de style) de l'image.

Justement, les pages .html sont dans le dossier ur(webie6) et ma feuille de style(.css), dans le sous-dossier style.css!

J'ai essayé: url("../ur099.jpg"), dans ma feuille .css et ça fonctionne!

Un coup de chance que je t'aie fait cette remarque. En la rédigeant, je me disais qu'elle était un peu superflue, vu que tu ne semblais pas externer tes feuilles de style !

[Nogi]

Bonjour dylav,

 

Kewlcat m’a écrit :

 

" Si tu mets une petite background-image en no-repeat dans un bloc, le reste du bloc non occupé par l'image sera rempli de la couleur du background-color. "

 

Je comprends mais, une autre question que je me demandais :

 

La photo que j’utilise est de 1600px x 1200px (Lxh).

Ma résolution d’écran est : 1024 x 768 (4:3)

 

Je comprends que je pourrais réduire ma photo( j’ai essayé 1000px X 675px) et c’est parfait! Mais si j’utilise cette photo, qq’un qui a une résolution d’écran de 1280 x 1024 aura la couleur du bckgrnd-color dans l’excédant tout autour.

 

Mon questionnement est : existe-t-il une astuce XHTML qui fait en sorte que si j’utilise la photo (1600 x 1200), la modification se fera pour chaque grandeur d’écran? Et aussi les écrans 16:9?

 

Photo . . . . . . . Navigateur . . . . Résolution d’écran

1600 x 1200 + astuce XHTML = 1024 x 768 (photo pleine grandeur, sans coupures!)

1600 x 1200 + astuce XHTML = 1280 x 1024 (idem)

 

Mais bon, j’imagine aussi qu’avec le 16:9, l’image serait du genre « étirée ». Donc, pas très attrayant!

 

L’idéal sera p-e de réduire la photo à 1280 x 1024 (au lieu de 1600 x 1200) et ceux qui ont une résolution inférieure, comme moi, auront une (infime) partie de l’image coupée.

 

Merci!

 

Nogi

[Dylav]

Pour les images de fond, la situation est claire, il n'existe aucun moyen d'en modifier les dimensions de façon dynamique, elle est toujours affichée en taille réelle.

 

Si vraiment tu tenais à offrir une image de fond adaptée à la résolution d'écran de ton visiteur, il faudrait que tu disposes d'autant de formats que de résolutions à satisfaire, et d'un petit script JavaScript qui récupérerait dynamiquement la résolution de l'écran pour déterminer l'image à afficher.

 

Voilà qui semble bien coûteux à déployer. Et je pense que ta solution intermédiaire est beaucoup plus réaliste. Il te suffit de bien choisir la couleur de fond, pour que les bordures ne jurent pas avec les nuances générales de l'image de fond