Question

我正在使用代码使我的网站可用于从800px开始的监视器但是当我输入宽度为800px的背景图像时，它不会填充页面，所以我添加了更高的宽度但它不适用于所有显示器，其他一些显示器在页面末尾显示水平滚动

这是我正在使用的代码：

body {
    margin:0 auto;
    padding:0;
    width:800px;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

#header {
    background-image:url(../imgs/header.png);
    position: absolute;
    margin-left: -320px;
    margin-top: -7px;
    width: 1440px;
    height: 445px;
    z-index: 1;
}

我希望有人通过给我一个正确的代码来帮助我，让所有显示器都可以使用该网站：）

Answer 1

简单...在div中包含图像
使用background-size:cover：）

#header {
   background-image:url(../imgs/header.png);
   background-size:cover /* here you go */
   -webkit-background-size: cover; /* vendor prefix */
   -moz-background-size: cover;/* vendor prefix */
   -o-background-size: cover;/* vendor prefix */
   position: absolute;
   margin-left: -320px;
   margin-top: -7px;
   width: 1440px;
   height: 445px;
   z-index: 1;
 }

修改

为什么会出现滚动条： ???因为你已经设置：

width: 1440px; height: 445px;
<{1>}中的
...将其更改为

#header

working demo

Answer 2

我在我的CSS的顶部宣布我的。在每个页面上使它相同并且它可以工作。如果页面变长，则会变得更长。什么对我有用

html, header { 
  background-image:url('Background.png'); 
  background-size:100% 100%; 
  background-repeat:no-repeat;
}

如何为所有显示器提供网站？

2 个答案: