Question

即使没有足够的内容来填充页面，我也试图将背景图像平铺并覆盖整个页面。现在，背景图像停在内容的底部。我使用粘性页脚修复将页脚保持在页面底部，所以我留下的是内容底部和页脚之间的一堆空白区域。

我不想用margin或padding来填充空格，因为这不会扩展到更大的显示器。

我附上了问题的图片：

enter image description here

这是CSS：

.static_pages {
    background-image: url('../img/cream_dust.png');
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
    width:  100%;
    height: 100%;
    margin: 0;

}

.static_content {
    width: 80%;
    margin: 3em auto 0 auto;
}
.static_content h1 {
    color: #193441;
}
.static_content p {
    color: #193441;
    text-align: left;
    margin-top: 2em;
}
.static_content ul {
    color: #193441;
}

和HTML

<?php include_once('header.php'); ?>
    <section class="static_pages">
        <div class="static_content">
            <h1>Header</h1>

                <p>A little Text</p> 

        </div><!-- END class="static_content" -->
    </section><!-- END class="static_pages" -->
<?php include_once('footer.php'); ?>

有什么想法吗？我一直在争论这一段时间。谢谢！

编辑：！doctype和所有其他标题信息都在包含的header.php文件中。这只是网站上的几个页面之一。我有一个主索引页面，这是一个很长的登陆页面，这是一个静态页面，用于联系，关于等等。

Answer 1

将背景放在HTML标记上：

html {
    background: transparent url('../img/cream_dust.png') scroll repeat 0 0;
}

Answer 2

您需要使用：

正确的doctype！
```
<!doctype html>
```

body

背景

body {
    background-image: url('../img/cream_dust.png');
    background-repeat: repeat;
}

全高身体！
```
body {height: 100%;}
```

使用不同的背景图像：

<body class="pageOne">
<body class="pageTwo">
<body class="pageThree">

CSS

.pageOne {background-image: url('../img/cream_dust.png');}
.pageTwo {background-image: url('../img/cream_sandwich.png');}
.pageThree {background-image: url('../img/cream_sand.png');}

平铺背景图像停在内容的底部，而不是页面

2 个答案:

您需要使用：

使用不同的背景图像：

CSS