Question

这是我的网站

http://albuquerqueautomotiveservice.com/

但是我在旧电脑上对它进行了编码，而且它的显示器相当于宽屏。

我刚在笔记本电脑中注意到页面的右侧是灰色的。

如何确保它只是水平伸展？

  body {
        background:#333 url(bg.jpg) no-repeat;
        width: 100%;
        font-family:Arial;
        cursor: url(images/wrench.cur);
        }

Answer 1

这就是background-size的用途：

background-size: cover;

如果您支持IE＆lt; 9，你必须使用their proprietary filter：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/bg.jpg', sizingMethod='scale')";

IE的另一个选择是将图片作为HTML中的实际img标记：

<img src="/path/to/bg.jpg" class="page-background" />

然后在CSS中使用这段代码：

.page-background {
    width: 100%;
    height: auto;
    z-index: -1;
}

Answer 2

而不是伸展你为什么不把你的页面放在中心？

HTML

<body>
<div id="wrap">

</div>
</body>

CSS

 body 
 {
    background:#333 url(bg.jpg) no-repeat center top;
    font-family:Arial;
    cursor: url(images/wrench.cur);
 }

 #wrap
 { 
   width: 1250px; 
   margin: 0 auto; 
 }

如何确保背景水平延伸？

2 个答案: