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

Bonjour,

Vous allez être infiniment heureux d'apprendre que alainL vient d'écrire :


> Taille 1200/900.

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

Y compris pur des écrans de 1440, 1680 ou autres ?

--�
Cordialement

guy.gruais@free.fr
http://paysderetz.free.fr/

alainL <jarailet@club-internet.fr> wrote:

> 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 ?

Les images background ne s'adaptent pas en taille, la seule "solution"
est de concevoir une image qui peut se répéter en largeur et de lui
adjoindre repeat-x à background. Dans ce cas une image de faible largeur
suffit puisqu'elle sera répété à l'infini.

Ca permet éventuellement un dégradé vertical.

--
Pierre-Alain Dorange

Vidéo, DV et QuickTime <http://www.garage-video.com/>
Clarus, the DogCow <http://clarus.chez.tiscali.fr/>

Guy Gruais a écrit :
> Bonjour,
>
> Vous allez être infiniment heureux d'apprendre que alainL vient d'écrire :
>
>
>> Taille 1200/900.
>
>> Serait-il possible de faire en sorte qu'elle s'adapte aux 100% de la
>> largeur de la page ?
>
> Y compris pur des écrans de 1440, 1680 ou autres ?
>
> --�
> Cordialement
>
> guy.gruais@free.fr
> http://paysderetz.free.fr/


Ce serait bien ! Mais ce n'est pas bien difficile de refaire une img
plus large -et plus lourde.
Donc: quelle taille serait adéquate ?
Comment faire pour qu'elle couvre toute la largeur de la page
et se répète en cas de défilement ?
si c'est faisable avec les css .....
Merci

--
Alain L

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

alainL <jarailet@club-internet.fr> wrote:

> Ce serait bien ! Mais ce n'est pas bien difficile de refaire une img
> plus large -et plus lourde.
> Donc: quelle taille serait adéquate ?

Ce n'est pas une bonne solution.
Regarde les stats de ton site et vois les utilisateurs qui ont les plus
grands écrans, mais demain ça aurait changé et du coup ta grande image
ne le sera plus...

Ainsi par exemple si tu consultes les stats du W3Schools des écrans tu
verras que chaque mois, les écrans des visiteurs sont de plus en plus
grands et ça depuis des années.

Si tu y tiens vraiment, les écrans très grands de nos jours sont du type
2560 x 1600 pixels. Mais dans 5 ans ça pourrait être 5000 x 3000.

> Comment faire pour qu'elle couvre toute la largeur de la page
> et se répète en cas de défilement ?

il n' y que l'option repeat-x (ou repeat-y suivant les cas) qui étend la
fond par répétition de l'image initiale. Simple et efficace, mais c'est
pas une seule image, c'est un "motif" répété.

> si c'est faisable avec les css .....

Ce n'est pas conseillé, un fond devrait être petit et unis (donc
répétable) pour faciliter la lecture. Il existe bien sur des cas
particuliers.

--
Pierre-Alain Dorange

Vidéo, DV et QuickTime <http://www.garage-video.com/>
Clarus, the DogCow <http://clarus.chez.tiscali.fr/>

Pierre-Alain Dorange a écrit :
> alainL <jarailet@club-internet.fr> wrote:
>
>> Ce serait bien ! Mais ce n'est pas bien difficile de refaire une img
>> plus large -et plus lourde.
>> Donc: quelle taille serait adéquate ?
>
> Ce n'est pas une bonne solution.
> Regarde les stats de ton site et vois les utilisateurs qui ont les plus
> grands écrans, mais demain ça aurait changé et du coup ta grande image
> ne le sera plus...
>
> Ainsi par exemple si tu consultes les stats du W3Schools des écrans tu
> verras que chaque mois, les écrans des visiteurs sont de plus en plus
> grands et ça depuis des années.
>
> Si tu y tiens vraiment, les écrans très grands de nos jours sont du type
> 2560 x 1600 pixels. Mais dans 5 ans ça pourrait être 5000 x 3000.
>
>> Comment faire pour qu'elle couvre toute la largeur de la page
>> et se répète en cas de défilement ?
>
> il n' y que l'option repeat-x (ou repeat-y suivant les cas) qui étend la
> fond par répétition de l'image initiale. Simple et efficace, mais c'est
> pas une seule image, c'est un "motif" répété.
>
>> si c'est faisable avec les css .....
>
> Ce n'est pas conseillé, un fond devrait être petit et unis (donc
> répétable) pour faciliter la lecture. Il existe bien sur des cas
> particuliers.
>

Comme mon img va du vert foncé à gauche au vert très clair à droite, je
croyais avoir trouvé un truc :
finir le dégradé par un blanc à droite... mais voilà, l'image se recopie
à droite de la première et la zone plus sombre fait un bandeau
vertical si l'écran dépasse les 1200...
J'ai ça dans le style de body:
background-image: url("Images/fond_degrade.gif");

j'ai essayé:
background-image: url("Images/fond_degrade.gif")no-repeat;

mais l'image n'apparait plus :-((

Comment empêcher l'image de se répéter horizontalement ?




--
Alain L

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

Bonjour,

Vous allez être infiniment heureux d'apprendre que alainL vient d'écrire :


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

Sur ce site http://boiseau.free.fr que je n'entretiens plus depuis 3 ans,
j'avais fait une image de 1px de large et de 1050 px de haut.
dans ma CSS j'avais indiqué
body
{
background: url(images/fond1.gif) repeat-x fixed;
}

Ainsi le fond s'adaptait quelle que soit la largeur de l'écran pour tous les
écrans de 1050 px de haut.
Ceux qui avaient un écran moins haut n'avaient pas la totalité verticale du
fond mais le dégradé se faisait sur 600 px (hauteur très usitée à l'époque)

--�
Cordialement

guy.gruais@free.fr
http://paysderetz.free.fr/

alainL a écrit :
> Pierre-Alain Dorange a écrit :
>> alainL <jarailet@club-internet.fr> wrote:
>>
>>> Ce serait bien ! Mais ce n'est pas bien difficile de refaire une img
>>> plus large -et plus lourde.
>>> Donc: quelle taille serait adéquate ?
>>
>> Ce n'est pas une bonne solution.
>> Regarde les stats de ton site et vois les utilisateurs qui ont les plus
>> grands écrans, mais demain ça aurait changé et du coup ta grande image
>> ne le sera plus...
>>
>> Ainsi par exemple si tu consultes les stats du W3Schools des écrans tu
>> verras que chaque mois, les écrans des visiteurs sont de plus en plus
>> grands et ça depuis des années.
>>
>> Si tu y tiens vraiment, les écrans très grands de nos jours sont du type
>> 2560 x 1600 pixels. Mais dans 5 ans ça pourrait être 5000 x 3000.
>>
>>> Comment faire pour qu'elle couvre toute la largeur de la page
>>> et se répète en cas de défilement ?
>>
>> il n' y que l'option repeat-x (ou repeat-y suivant les cas) qui étend la
>> fond par répétition de l'image initiale. Simple et efficace, mais c'est
>> pas une seule image, c'est un "motif" répété.
>>
>>> si c'est faisable avec les css .....
>>
>> Ce n'est pas conseillé, un fond devrait être petit et unis (donc
>> répétable) pour faciliter la lecture. Il existe bien sur des cas
>> particuliers.
>>
>
> Comme mon img va du vert foncé à gauche au vert très clair à droite, je
> croyais avoir trouvé un truc :
> finir le dégradé par un blanc à droite... mais voilà, l'image se recopie
> à droite de la première et la zone plus sombre fait un bandeau
> vertical si l'écran dépasse les 1200...
> J'ai ça dans le style de body:
> background-image: url("Images/fond_degrade.gif");
>
> j'ai essayé:
> background-image: url("Images/fond_degrade.gif")no-repeat;
>
> mais l'image n'apparait plus :-((
>
> Comment empêcher l'image de se répéter horizontalement ?
>

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

--
Alain L

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

alainL a écrit :
>
> Donc: quelle taille serait adéquate ?

idéalement ? 1 pixel !

Pasque là 900*1200 ... ça doit peser !

Et pourquoi finalement ?
Juste un peu de cosmétique à la gloire du webmaster ou de son
webdesigner (ça intéresse qqu'un ? ça apporte qque chose ? ça vaut le
coup de faire attendre le visiteur ?)

> Comment faire pour qu'elle couvre toute la largeur de la page
> et se répète en cas de défilement ?

Ya rien à faire c'est totomatique

body { background: url(vige.gif) }

Il y a aussi background-attachement
(le texte de la page défilera sur le background)
(je crois que des IE on des blèmes avec ça ?)

body {
background: url(imageLegere.jpg) no-repeat center center fixed #ffc;
}


> si c'est faisable avec les css .....

<http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-repeat>
<http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background>

toute la liste des trucs en CSS 2 :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

toute la liste des trucs en CSS 2.1 (en pas français) :
<http://www.w3.org/TR/CSS21/indexlist.html>

--
sm

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;
}

--
sm

SAM a écrit :
> alainL a écrit :
>>
>> Donc: quelle taille serait adéquate ?
>
> idéalement ? 1 pixel !
>
> Pasque là 900*1200 ... ça doit peser !

Je réduis ça demain....

>
> Et pourquoi finalement ?
> Juste un peu de cosmétique à la gloire du webmaster ou de son
> webdesigner (ça intéresse qqu'un ? ça apporte qque chose ? ça vaut le
> coup de faire attendre le visiteur ?)

Pas pour la gloire (trop de risques de déception ) mais comme je
bricole pour m'amuser... Bon, et puis, partant de là, pourquoi aussi
encadrer un tableau ? pourquoi faire une affiche en couleurs ?
.... dans la mesure où on ne fait pas marronner le visiteur, c'est vrai .
>
>> Comment faire pour qu'elle couvre toute la largeur de la page
>> et se répète en cas de défilement ?
>
> Ya rien à faire c'est totomatique
>
> body { background: url(vige.gif) }
>
> Il y a aussi background-attachement
> (le texte de la page défilera sur le background)
> (je crois que des IE on des blèmes avec ça ?)

oui, je viens de voir !

>
> body {
> background: url(imageLegere.jpg) no-repeat center center fixed #ffc;
> }
>

finalement, j'ai obtenu ce que je voulais (IE et Ffx) avec ça :

background-image: url("Images/fond_degrade.gif");
background-repeat: repeat-y;
>
>> si c'est faisable avec les css .....
>
> <http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-repeat>
>
> <http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background>
>
> toute la liste des trucs en CSS 2 :
> <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
>
> toute la liste des trucs en CSS 2.1 (en pas français) :
> <http://www.w3.org/TR/CSS21/indexlist.html>
>
Merci pour les liens.

--
Alain L

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

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

Sergio <laposte@serge.delbono.net.invalid> 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/>

Pierre-Alain Dorange a écrit :
> Sergio <laposte@serge.delbono.net.invalid> 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)

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> 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/>

Pierre-Alain Dorange a écrit :
> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> 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

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