0

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

我不想用marginor来填充空间，padding因为它不会扩展到更大的显示器。

我附上了问题的图片：

在此处输入图像描述

这是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 文件中。这只是网站上的几个页面之一。我有一个主索引页面，它是一个长登录页面，这是一个静态页面，用于存放联系人、关于等内容。

4

2 回答 2

1

将背景放在HTML标签上：

html {
    background: transparent url('../img/cream_dust.png') scroll repeat 0 0;
}
于 2013-01-08T17:34:13.963 回答
0

你需要使用：

  1. 一个正确的doctype！

    <!doctype html>

  2. 背景body

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

  3. 全高身材！

    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');}
于 2013-01-08T17:17:40.960 回答