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