L'image d'arrière-plan est étirée

J'ai un fichier jpg 40x1000 pour mon arrière-plan. Mon CSS est comme suit:L'image d'arrière-plan est étirée

body 
{ 
    margin: 0px; 
    padding:0 px; 
    text-align: center; 
    background-image: url(jute_for_web1.jpg) ; 
    background-repeat: repeat-x; 
    font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
    border-top:0px; 
    height:100%; 
    width:100%; 
} 
div.container 
{ 
    text-align: left; 
    border-color: Black; 
    border-width: 0px; 
    border-style: solid; 
    width: 1000px; 
    height: 768px; 
    margin: 5px auto; 
    background-color:White; 
}

Ceci étend mon image. Qu'est-ce que je fais mal?

Source

2010-06-09 yaip

images de fond ne peuvent pas être mis à l'échelle par CSS, de sorte que le problème pourrait être quelque chose de différent que ce que vous pensez. Donc, dans ce cas, si vous pouvez fournir un lien vers un exemple de page avec le problème, alors je parie que quelqu'un sera plus susceptible de trouver une solution pour vous – mVChr

Quel navigateur utilisez-vous? Votre code semble fonctionner comme prévu (l'image est répétée sur toute la largeur du navigateur) dans Firefox 3.6.3. –

ne pas étirer votre image ..

Vous placez juste le .container au-dessus de l'image d'arrière-plan, et puisque vous avez background-color:white sur le récipient, l'image au niveau du corps ne sont pas affichés ..

dites-nous ce que vous voulez faire exactement et nous pouvons vous aider plus ..

Source

2010-06-09 22:38:32

Mais l'image de fond répétée sera visible à l'extérieur du conteneur. –

@Gert, Le conteneur est plutôt grand, et probablement cache la plupart des backgorund .. Je pense que c'est pourquoi il croit que l'image est étirée .. parce qu'il n'en voit qu'une petite partie .. –

Peut-être. J'utilise 1280x1024, donc pour moi, l'image a montré. –

Une partie de votre code HTML pourrait vous être utile. Dans cet exemple, l'image est apparue correctement. (J'ai fait une image en utilisant le même nom.)

<html> 
    <head> 
     <style type="text/css"> 
      body 
      { 
       margin: 0px; 
       padding:0 px; 
       text-align: center; 
       background-image: url(jute_for_web1.jpg) ; 
       background-repeat: repeat-x; 
       font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
       border-top:0px; 
       height:100%; 
       width:100%; 
      } 
      div.container 
      { 
       text-align: left; 
       border-color: Black; 
       border-width: 0px; 
       border-style: solid; 
       width: 1000px; 
       height: 768px; 
       margin: 5px auto; 
       background-color:White; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      Hello World! 
     </div> 
    </body> 
</html>

Source

2010-06-09 22:40:31 JYelton

Y at-il un moyen de télécharger une image ici afin que je puisse vous montrer ce que je vois? – yaip

Jetez un oeil à http://yfrog.com/jojutej – JYelton

C'est l'image: http://yfrog.com/jk1d6j et rend comme: http://yfrog.com/j5fbqp – yaip

L'image d'arrière-plan est étirée

Répondre

Questions connexes