Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS : taille img de fond

16 réponses
Avatar
alainL
Bonjour,

J'ai fait une image de fond en dégradé pour mes pages.
Taille 1200/900.
Je l'utilise dans les parametres du body de la feuille de style:

background-image:url("Images/fond_degrade.gif");

Serait-il possible de faire en sorte qu'elle s'adapte aux 100% de la
largeur de la page ?
Merci

--
Alain L

Mon village en Haute Soule : http://jarailet.club.fr
Carnet de voyages: http://jarailet.club.fr/Randobal

6 réponses

1 2
Avatar
Sergio
SAM a émis l'idée suivante :
alainL a écrit :

trouvé:
background-image: url("Images/fond_degrade.gif");
background-repeat: no-repeat ;



Si c'est un dégradé de gauche à droite,
- faire une image de 2px de haut et 1200 ou 1600 de large
- la mettre en repeat vertical
- la positionner à gauche
- mettre une couleur de fond = à celle de fin de dégradé

body {
background: url(fond.jpg) repeat-y left top #eee;
}



Pas tip-top. Suivant le navigateur, l'OS, les réglages colorimétriques
etc., il peut y avoir une diférence entre le rendu des couleurs de
l'image et le rendu des couleurs du HTML/CSS.


--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
pdorange
Sergio wrote:

> body {
> background: url(fond.jpg) repeat-y left top #eee;
> }

Pas tip-top. Suivant le navigateur, l'OS, les réglages colorimétriques
etc., il peut y avoir une diférence entre le rendu des couleurs de
l'image et le rendu des couleurs du HTML/CSS.



En effet, dans ces cas il vaut mieux essayer de finir le dégradé sur une
couleur extrème (blanc ou noir), qui sont les seules a avoir un rendu
homogène sur toutes les plateformes. Avec tout autres couleurs on va
avoir droit a un écart par fois important entre la fin du dégragé et la
couleur de fond (ici #eee), sauf avec certains navigateurs/os qui
supportent les profils de couleur : dans ce cas il faut penser a
sauvegarder le JPG de fond avec un profil colorimétrique...
--
Pierre-Alain Dorange

Vidéo, DV et QuickTime <http://www.garage-video.com/>
Clarus, the DogCow <http://clarus.chez.tiscali.fr/>
Avatar
SAM
Pierre-Alain Dorange a écrit :
Sergio wrote:

body {
background: url(fond.jpg) repeat-y left top #eee;
}


Pas tip-top. Suivant le navigateur, l'OS, les réglages colorimétriques
etc., il peut y avoir une diférence entre le rendu des couleurs de
l'image et le rendu des couleurs du HTML/CSS.



En effet, dans ces cas il vaut mieux essayer de finir le dégradé sur une
couleur extrème (blanc ou noir), qui sont les seules a avoir un rendu
homogène sur toutes les plateformes. Avec tout autres couleurs on va
avoir droit a un écart par fois important entre la fin du dégragé et la
couleur de fond (ici #eee), sauf avec certains navigateurs/os qui
supportent les profils de couleur : dans ce cas il faut penser a
sauvegarder le JPG de fond avec un profil colorimétrique...



SVP ....
la couleur de fond telle que #eee n'est qu'un exemple
libre de l'affiner #e9e9e9

On parle là de la frange droite qui ne sera vue que par quelques
extrémistes du grand écran et du mode plein écran :
- ça va concerner quel % de visiteurs ?
- dans les tons très pale ça va varier si visiblement, atrocement ?
- bien sûr, on est certain que le moniteur du visiteur est réglé tip-top

Néanmoins, il faut être au courant du problème :
la couleur relevée sur une image et mise en fond n'est jamais affichée
pareil (en particulier, mon IE Mac est très très approximatif)
Avatar
pdorange
SAM wrote:

[...]
On parle là de la frange droite qui ne sera vue que par quelques
extrémistes du grand écran et du mode plein écran :
- ça va concerner quel % de visiteurs ?



Un pourcentage grandissant dans le temps. Aujourd'hui peu mais demain
beaucoup plus.
Par exemple tu parles de faire un image de 1200 ou 1600 de large, à la
maison mon écran fait 1650, donc en plein écran j'apercevrait le fond
sur le bord droit.

- dans les tons très pale ça va varier si visiblement, atrocement ?



Non pas atrocement, quoique ça dépend du (non)calibrage de l'écran. Mais
plus ce sera clair moins ça devrait être visible en effet.

- bien sûr, on est certain que le moniteur du visiteur est réglé tip-top



Justement ça n'existe pas. Si tout les navigateurs supportait la gestion
des profils couleurs, ce ne serait plus un problème.

Sinon, on doit pouvoir, au lieu de mettre une couleur au fond, créer un
div supplémentaire plein cadre pour l'image repétée et associer une
autre image uni de la même couleur que la fin du dégradé. Là quelques
soit l'écran il n'y aura jamais d'écart de couleur. Ca oblige à un
bricolage pour utiliser le fond-body avec une petite image uni repétée
en x-y et un div par dessous pour l'image degradée repétée dans le sens
qui va bien...
Je sais pas si c'est clair...

Néanmoins, il faut être au courant du problème :
la couleur relevée sur une image et mise en fond n'est jamais affichée
pareil (en particulier, mon IE Mac est très très approximatif)



Voilà. Mais il est vrai qu'il s'agit d'un problème assez marginal, pour
un design particulier et pour les grands écrans d'utilisateur.
--
Pierre-Alain Dorange

Vidéo, DV et QuickTime <http://www.garage-video.com/>
Clarus, the DogCow <http://clarus.chez.tiscali.fr/>
Avatar
SAM
Pierre-Alain Dorange a écrit :
SAM wrote:

[...]
On parle là de la frange droite qui ne sera vue que par quelques
extrémistes du grand écran et du mode plein écran :
- ça va concerner quel % de visiteurs ?



Un pourcentage grandissant dans le temps. Aujourd'hui peu mais demain
beaucoup plus.
Par exemple tu parles de faire un image de 1200 ou 1600 de large, à la
maison mon écran fait 1650, donc en plein écran j'apercevrait le fond
sur le bord droit.



Je m'interroge sur la nécessité de voir une page web à cette largeur.

J'ai moi aussi un écran de cette largeur, ce n'est pas pour le voir
envahi par l'application en cours (les films OK, mais les 5 ou 10 autres
applis ouvertes en + ... non).

Sinon, on doit pouvoir, au lieu de mettre une couleur au fond, créer un
div supplémentaire plein cadre pour l'image repétée et associer une
autre image uni de la même couleur que la fin du dégradé. Là quelques
soit l'écran il n'y aura jamais d'écart de couleur. Ca oblige à un
bricolage pour utiliser le fond-body avec une petite image uni repétée
en x-y et un div par dessous pour l'image degradée repétée dans le sens
qui va bien...
Je sais pas si c'est clair...



Rien de rien ... nab ... trop tordu ...
Une démo ?

--
sm
Avatar
BertrandB
alainL a écrit :
Bonjour,

J'ai fait une image de fond en dégradé pour mes pages.
Taille 1200/900.
Je l'utilise dans les parametres du body de la feuille de style:

background-image:url("Images/fond_degrade.gif");

Serait-il possible de faire en sorte qu'elle s'adapte aux 100% de la
largeur de la page ?
Merci



il y a une démo sur le site de stu nichols mais en fait il n'utilise
plus un backgroud-image mais une image

http://www.cssplay.co.uk/layouts/background.html
1 2