我的元素没有填充页面的整个空间

时间:2017-03-28 00:51:56

标签: html css

因此,使用下面的CSS代码,我想让我的页面完全填满我计算机上的图像。相反,结果如下:

#background {
    background-image: url("anFtp");
    position: fixed;
    height:100%;
    width:100%;
    z-index: -1;
    float: left;
}

The Stupid Image

您可能会看到页面顶部和左侧有空白区域。现在我尝试了很多东西,这就是我的代码现在的样子。原始代码看起来像:

#background {
    background-image: url("anFtp");
    position: fixed;
    width: 1600px;
    height: 900px;
    z-index: -1;
}

这有多个结果,我尝试了它们(将1600px900px更改为100%),但大多数人告诉我其他人写的内容不正确,而不是代码的实际错误或作者的知识。

编辑/添加到以下答案

添加以下答案建议的内容有助于解决问题,但现在看起来像这样:

enter image description here

3 个答案:

答案 0 :(得分:3)

试试这个。它有用吗

body {margin: 0;}

已编辑:有关更新的问题

#background {
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

答案 1 :(得分:1)

所有浏览器都附带 默认样式表 。它提供了一组基本的CSS规则。

以下是W3C的示例默认样式表:https://www.w3.org/TR/CSS22/sample.html

从示例中可以看出,建议浏览器包含body { margin: 8px }。这可能是body和视口之间的空白来源。

覆盖默认使用body { margin: 0; }

答案 2 :(得分:-1)

html, body {
    margin: 0px;
    padding: 0px;
}