Background probleme images

**poltron** · 13/06/2013, 22h00

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

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

**poltron** · 13/06/2013, 22h20

Merci

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

La resolution de l'ecran est de 1920 x 1080

**rodolphebrd** · 13/06/2013, 22h28

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** · 13/06/2013, 22h30

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

**nicosmash** · 13/06/2013, 22h31

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** · 13/06/2013, 22h33

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

**nicosmash** · 13/06/2013, 22h34

Essayer :

Code css :

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

background-size: 100% 100%;

**poltron** · 13/06/2013, 22h36

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%;
}

**nicosmash** · 13/06/2013, 22h41

Mettez lui une largeur et hauteur à 100% :

Code css :

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

1
2
height:100%;
width:100%;

**poltron** · 13/06/2013, 22h42

Envoyé par poltron

Non sa marche pas.

Je precise c'est pour un background de body.

Code :

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

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

**nicosmash** · 13/06/2013, 22h44

Mettez un Doctype html5 :

Code html :

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

<!doctype html>

Puis du CSS3 :

Code css :

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

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; }

**poltron** · 13/06/2013, 22h46

Sans HTML 5 svp.

Merci

**rodolphebrd** · 13/06/2013, 22h47

Regardez ce lien

Envoyé par Poltron

Sans HTML 5 svp.

Pour quelle raison?

**nicosmash** · 13/06/2013, 22h47

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

**poltron** · 13/06/2013, 22h54

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 css :

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

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; }

**nicosmash** · 13/06/2013, 23h06

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 css :

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

1
2
height: 80%;
width: auto;

**poltron** · 13/06/2013, 23h12

Non toujours pareil rien ne va.

**nicosmash** · 13/06/2013, 23h13

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

Un screenshot et le code complet s'il vous plait.

**rodolphebrd** · 14/06/2013, 10h51

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.

Background probleme images

HTML

Discussions similaires

Partager

Partager