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

10 réponses

1 2
Avatar
Guy Gruais
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 ?

--
Avatar
pdorange
alainL 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/>
Avatar
alainL
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 ?

--
Avatar
pdorange
alainL 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/>
Avatar
alainL
Pierre-Alain Dorange a écrit :
alainL 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
Avatar
Guy Gruais
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)

--
Avatar
alainL
alainL a écrit :
Pierre-Alain Dorange a écrit :
alainL 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
Avatar
SAM
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
Avatar
SAM
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
Avatar
alainL
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
1 2