Discussion :

[poltron]

Bonjour,

J'ai une photo qui est plus petite que l'ecran.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
background-image:url(../img/logo.jpg);
background-repeat:no-repeat;
background-size:100%;

Mais ce code affiche l'image en trop grand.

Où est le problème ?

Merci

[nicosmash]

Bonsoir,
Quelles sont les résolutions, de l'écran et celle de la photo ?

[poltron]

Merci

La resolution de la photo est de 720px X 960px

La resolution de l'ecran est de 1920 x 1080

[rodolphebrd]

Bonjour,

si l'image s'affiche en trop grand, quel effet souhaitez-vous obtenir?

Transmettez plus de code (html et css) ou un exemple, ou une page en ligne!

[poltron]

J'aimerai afficher toute l'image sur mon site.
Sans bordure blanche.

[nicosmash]

Car vous faites :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size: 100%;

Alors que dans la doc le background-size sert à ceci ...

Donc par défaut l'image à sa taille d'origine.

Vous pouvez également faire :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size: auto auto;

Comme écrit dans la doc si un paramètre le deuxième sera auto:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size: 100% /*auto*/;

Donc selon ce que vous voulez, vous jouez avec ces deux paramètres

[poltron]

Merci mais l'image ne prends pas la totalité de la page.

[nicosmash]

Essayer :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size: 100% 100%;

[poltron]

Non sa marche pas.

Sa m'affiche un trait .

Je precise c'est pour un background de body.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
body {
background-image:url(../img/logo.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
}