背景图片拉伸

我的背景有一个40x1000的jpg文件。我的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; 
}

这延伸了我的形象。我究竟做错了什么？

来源

2010-06-09 yaip

背景图片不能通过CSS缩放，所以问题可能与您的想法有所不同。因此，在这种情况下，如果您可以提供带问题的示例页面的链接，那么我敢打赌，有人会更可能为您找到解决方案 – mVChr 2010-06-09 22:42:57

您正在使用哪种浏览器？在Firefox 3.6.3中，您的代码似乎按预期工作（图像在浏览器的整个宽度上重复）。 – 2010-06-09 22:47:22

它不舒展你的形象..

您只需将.container背景图像的顶部，因为你在容器上有background-color:white，在身体形象没有得到显示..

告诉我们你想要做什么，我们可以帮助更多..

来源

2010-06-09 22:38:32

但重复的背景图像将在容器外部可见。 – 2010-06-09 23:02:13

@Gert，容器比较大，最有可能隐藏大部分backgorund ..我想这就是为什么他认为图像被拉伸..因为他只看到它的一小部分.. – 2010-06-10 00:07:09

可能是。我使用1280x1024，所以对我来说，图像显示。 – 2010-06-10 00:17:31

你的一些HTML可能会有所帮助。在这个例子中，图像正确显示。（我用相同的名字制作了一张图片。）

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

来源

2010-06-09 22:40:31 JYelton

有没有办法在这里上传图片，以便我可以告诉你我看到了什么？ – yaip 2010-06-11 17:33:57

看看http://yfrog.com/jojutej – JYelton 2010-06-11 18:11:01

这是图像： http://yfrog.com/jk1d6j ，它呈现为： http://yfrog.com/j5fbqp – yaip 2010-06-11 19:32:50

背景图片拉伸

回答

相关问题