Background probleme images

Version imprimable

13/06/2013, 22h00
poltron

Background probleme images
Bonjour,

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

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
13/06/2013, 22h15
nicosmash

Bonsoir,
Quelles sont les résolutions, de l'écran et celle de la photo ?
13/06/2013, 22h20
poltron

Merci

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

La resolution de l'ecran est de 1920 x 1080
13/06/2013, 22h28
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!
13/06/2013, 22h30
poltron

J'aimerai afficher toute l'image sur mon site.
Sans bordure blanche.
13/06/2013, 22h31
nicosmash

Car vous faites :

Code:

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:

background-size: auto auto;

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

Code:

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

Donc selon ce que vous voulez, vous jouez avec ces deux paramètres
13/06/2013, 22h33
poltron

Merci mais l'image ne prends pas la totalité de la page.
13/06/2013, 22h34
nicosmash

Essayer :

Code:

background-size: 100% 100%;
13/06/2013, 22h36
poltron
Non sa marche pas.

Sa m'affiche un trait .

Je precise c'est pour un background de body.
Code:

1 2 3 4 5 body { background-image:url(../img/logo.jpg); background-repeat:no-repeat; background-size: 100% 100%; }
13/06/2013, 22h41
nicosmash
Mettez lui une largeur et hauteur à 100% :
Code:

1 2 height:100%; width:100%;
13/06/2013, 22h42
poltron
Citation:
Envoyé par poltron

Non sa marche pas.

Je precise c'est pour un background de body.

Code:

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

Mettez un Doctype html5 :

Code:

<!doctype html>

Puis du CSS3 :

Code:

1
2
3
4
5
6
7
 
 html { 
background: url(....jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; }

13/06/2013, 22h46
poltron

Sans HTML 5 svp.

Merci
13/06/2013, 22h47
rodolphebrd

Regardez ce lien ;)

Citation:

Envoyé par Poltron

Sans HTML 5 svp.

Pour quelle raison?
13/06/2013, 22h47
nicosmash

Alors sans html mais faites-le sur l'élément html en CSS3.

Alors j'ai essayé mais voila ce que sa me donne :
http://imageshack.us/content_round.p...236/bugkkl.png

Normalement on doit voir la tete entiere de l'indien
Code:

1 2 3 4 5 6 7 8 9 10 11 12 body { background-image:url(../img/logo.jpg); background-repeat:no-repeat; background-size: 100% 100%; } html { background: url(../img/logo.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

13/06/2013, 23h06
nicosmash
Pour insérer des pièces jointes (dans votre cas des images) il faut allez dans la partie :

Options supplémentaires, en dessous du bouton Envoyer

Donc si la hauteur est trop grande il faut ... ? La réduire et redimensionner automatiquement la largeur, donc :
Code:

1 2 height: 80%; width: auto;
13/06/2013, 23h12
poltron

1 pièce(s) jointe(s)

Non toujours pareil rien ne va.
13/06/2013, 23h13
nicosmash

Avec des arguments comme celui-ci on va loin dans la vie ...

Un screenshot et le code complet s'il vous plait.
14/06/2013, 10h51
rodolphebrd

Votre image placée en background sera soit déformée soit rognée...
Il est impossible que les dimensions de votre image s'adapte à toutes les dimensions de fenêtre d'affichage.
Et si vous travaillez votre image (Photoshop par ex) pour qu'elle s'adapte à votre écran, n'oubliez pas qu'il existe une variété de formats d'écran sur lesquels le rendu sera différent.

A mon sens le personnage de votre image pourrait être plus petit sur un fond plus grand, laissant certes plus de vide mais permettant de ne pas perdre le sujet central.

Fuseau horaire GMT +2. Il est actuellement 13h03.