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

Ecrans, pouces et pixels

13 réponses
Avatar
romer
Bonjours,

Je viens de faire une image de fond avec dégradé. Pour que ce dégradé
occupe tout l'écran des grands écrans - disons 24 pouces maxi pour
l'instant - combien de pixels doit comporter cette image en largeur ?

En CSS, j'ai fait cela :
background: url(images/fonds.jpg) repeat-y;

et jai fait un fond dégradé de n X 1 pixels.
Comme je ne peux pas vérifier sur un grand écran, quelle valeur attibuer
à n ? 1000 px, 2000, 3000 ?

Avez-vous une idée ?
Merci
--
A+

Romer

10 réponses

1 2
Avatar
Thierry B.
--{ Bernd a plopé ceci: }--

Je viens de faire une image de fond avec dégradé. Pour que ce dégradé
occupe tout l'écran des grands écrans - disons 24 pouces maxi pour
l'instant - combien de pixels doit comporter cette image en largeur ?



X pixels.

Avez-vous une idée ?



Ici, j'ai un 32" avec 1024 pixels en largeur, et un 14" avec
1152 pixels en largeur. A toi de faire le calcul.

--
P : Le pneu principal interieur gauche a quasiment besoin d'être changé.
C : Pneu principal interieur gauche quasiment changé.
Avatar
viza
Hi

On Fri, 13 Jun 2008 12:30:41 +0200, Bernd wrote:
Je viens de faire une image de fond avec dégradé. Pour que ce dégradé
occupe tout l'écran des grands écrans - disons 24 pouces maxi pour
l'instant - combien de pixels doit comporter cette image en largeur ?



Comment savez-vous que quelqun n'en a pas de plus que 24 pouces?

A l'autre-main, que se passerai si je lis ce site-web de mon telephone
mobile? L'ecran-la n'est que 1.5 pouces.

Il n'y a pas un vrai reponse a ce question, alors je ferais:

background-image:url( 'images/fonds.png' );
background-color: #xxxxxx;
background-repeat: repeat-y;
background-position: left;

et pour #xxxxxx, ecrire le coleur de le cote droite de l'image. Si vous
ferriez ca, l'image peut avoir n'importe quelle taille.

HTH
viza
Avatar
romer
viza wrote:

Comment savez-vous que quelqun n'en a pas de plus que 24 pouces?



C'est un choix.

A l'autre-main, que se passerai si je lis ce site-web de mon telephone
mobile? L'ecran-la n'est que 1.5 pouces.



Je n'ai pas encore prévu de l'adapter au mobiles et autres écrans
lilliputiens.

Il n'y a pas un vrai reponse a ce question, alors je ferais:

background-image:url( 'images/fonds.png' );



Vous pensez que ceux qui ont IE 5 vont lire les png ?

background-color: #xxxxxx;
background-repeat: repeat-y;
background-position: left;

et pour #xxxxxx, ecrire le coleur de le cote droite de l'image. Si vous
ferriez ca, l'image peut avoir n'importe quelle taille.



J'ai un doute justement - j'ai essayé et si l'image de fond n'a pas au
minimum la taille de l'écran, elle est coupée. Et ce n'est pas top dans
ce cas.
--
A+

Romer
Avatar
viza
Hi

On Fri, 13 Jun 2008 13:59:01 +0200, Bernd wrote:
viza wrote:

Comment savez-vous que quelqun n'en a pas de plus que 24 pouces?



C'est un choix.



Oui, mais c'est leur choix, pas le votre. :-)

A l'autre-main, que se passerai si je lis ce site-web de mon telephone
mobile? L'ecran-la n'est que 1.5 pouces.



Je n'ai pas encore prévu de l'adapter au mobiles et autres écrans
lilliputiens.



Ce n'est pas necessaire d'adapter de tout. Un site bien-ecrit peut etre
utilize partout.

background-image:url( 'images/fonds.png' );



Vous pensez que ceux qui ont IE 5 vont lire les png ?



Les png de 256 coleurs, oui.

background-color: #xxxxxx;
background-repeat: repeat-y;
background-position: left;

et pour #xxxxxx, ecrire le coleur de le cote droite de l'image. Si
vous ferriez ca, l'image peut avoir n'importe quelle taille.



J'ai un doute justement - j'ai essayé et si l'image de fond n'a pas au
minimum la taille de l'écran, elle est coupée. Et ce n'est pas top dans
ce cas.



Si l'image est de taille 10, par exemple:

50 49 48 47 46 45 44 43 42 41

et l'ecran est 8, vous auriez:

50 49 48 47 46 45 44 43

est si l'ecran est 13:

50 49 48 47 46 45 44 43 42 41 41 41 41

les premieres 10 de l'image, et les autres de le background-color.

Souvenez que avec ce methode, tout est parail que d'avant, sauf que en
cas de un ecran plus grand. Vous avez encore le choix de taille de
l'image (pour lequelle Thierry a deja repondu).

viza

--
PS: si c'est n'est pas bien-evident, je suis pas francophone natif.
Avatar
Pierre Goiffon
Bernd wrote:
background-image:url( 'images/fonds.png' );



Vous pensez que ceux qui ont IE 5 vont lire les png ?



Hahu ?!?? Les PNG sont très bien lisibles par IE depuis un moment !
C'est avec la transparence graduelle et les PNG 24 bits que IE < 7 a du
mal...
Avatar
pdorange
viza wrote:

>> background-color: #xxxxxx;
>> background-repeat: repeat-y;
>> background-position: left;
>>
>> et pour #xxxxxx, ecrire le coleur de le cote droite de l'image. Si
>> vous ferriez ca, l'image peut avoir n'importe quelle taille.
>
> J'ai un doute justement - j'ai essayé et si l'image de fond n'a pas au
> minimum la taille de l'écran, elle est coupée. Et ce n'est pas top dans
> ce cas.

Si l'image est de taille 10, par exemple:

50 49 48 47 46 45 44 43 42 41

et l'ecran est 8, vous auriez:

50 49 48 47 46 45 44 43

est si l'ecran est 13:

50 49 48 47 46 45 44 43 42 41 41 41 41

les premieres 10 de l'image, et les autres de le background-color.

Souvenez que avec ce methode, tout est parail que d'avant, sauf que en
cas de un ecran plus grand. Vous avez encore le choix de taille de
l'image (pour lequelle Thierry a deja repondu).



Si je ne m'abuse ça risque d'être pas valable pour beaucoup de cas,
comment maitriser le rendu de la couleur de fin de l'image et celle du
HTML par le navigateur...
Tout les systèmes n'incorporent pas de gestionnaire de couleur avec
profils.

Pour assurer une véritable continuité de couleur (entre l'image et le
fond justement) il me semble préférable de créer une autre image (avec
le même logiciel et le même profil) de couleur qui correspond a celle de
fin de l'image de base (couleur 41 dans ton exemple).
Ca nécessite un peu de bidouillage pour pouvoir coller tout ça en fond
mais le rendu des couleurs sera conforme et il n'y aura aucun écart de
couleur entre la fin de l'image et le fond...

--
Pierre-Alain Dorange

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

Oui, mais c'est leur choix, pas le votre. :-)



Oui mais j'assume, tant pis pour les conséquences.

> J'ai un doute justement - j'ai essayé et si l'image de fond n'a pas au
> minimum la taille de l'écran, elle est coupée. Et ce n'est pas top dans
> ce cas.

Si l'image est de taille 10, par exemple:

50 49 48 47 46 45 44 43 42 41

et l'ecran est 8, vous auriez:

50 49 48 47 46 45 44 43

est si l'ecran est 13:

50 49 48 47 46 45 44 43 42 41 41 41 41

les premieres 10 de l'image, et les autres de le background-color.




Merci de ces précisions mais là je dérape - tu veux dire quoi par image
taille 10 et écran taille 8 ? et c'est quoi ces valeurs 50 49 48 etc. ?
--
A+

Romer
Avatar
romer
Pierre Goiffon wrote:

Bernd wrote:
>> background-image:url( 'images/fonds.png' );
>
> Vous pensez que ceux qui ont IE 5 vont lire les png ?

Hahu ?!?? Les PNG sont très bien lisibles par IE depuis un moment !
C'est avec la transparence graduelle et les PNG 24 bits que IE < 7 a du
mal...



Tant mieux - bonne nouvelle. Comme je n'ai pas de PC, je ne pouvais
faire l'essai sauf des lectures sur le web où il est dit que c'est pas
possible mais sans doute pense t-ils, sans le mentionner explicitement,
que c'est en 24 bits.
--
A+

Romer
Avatar
SAM
Bernd a écrit :

J'ai un doute justement - j'ai essayé et si l'image de fond n'a pas au
minimum la taille de l'écran, elle est coupée. Et ce n'est pas top dans
ce cas.



t'as t'y compris ou t'as t'y pas compris l'astuce ?

on met en couleur de fond la teinte obtenue en extrémité droite de l'image
Bien sûr là il n'y a plus de dégradé,
mais, normalement, là on en est soit au plus sombre soit au plus clair -
bref on est au maxi quoi

Bon, maintenant si c'est une image qui représente qque chose et qu'au
plus pale du dégradé on y voit encore le dessin ... tu es mal !
Surtout avec un écran + petit que l'image.


L'image de fond ne sera coupée que *SI l'écran est plus petit* qu'elle
(et non pas le contraire)

--
sm
Avatar
SAM
Bernd a écrit :
viza wrote:

Si l'image est de taille 10, par exemple:

50 49 48 47 46 45 44 43 42 41

et l'ecran est 8, vous auriez:

50 49 48 47 46 45 44 43

est si l'ecran est 13:

50 49 48 47 46 45 44 43 42 41 41 41 41

les premieres 10 de l'image, et les autres de le background-color.




Merci de ces précisions mais là je dérape - tu veux dire quoi par image
taille 10 et écran taille 8 ? et c'est quoi ces valeurs 50 49 48 etc. ?



image de largeur 10 unités
(on se moque savoir laquelle, c'est juste pour avoir une échelle de
grandeur)

pour chaque unité on a une couleur issue d'un dégradé en 10 nuances,
par exemple du rouge à rose :
Le rouge est la couleur 50
Le rose est la couleur 41

--
sm
1 2