0

ページを埋めるのに十分なコンテンツがない場合でも、ページ全体を並べて表示するために背景画像を取得しようとしています。現在、背景画像はコンテンツの下部で停止しています。スティッキーフッター修正を使用してフッターをページの下部に保持しているため、コンテンツの下部とフッターの間に空白がたくさん残っています。

スペースをいっぱいにしたくない、marginまたは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ファイルにあります。これは、サイト上のいくつかのページの1つにすぎません。長いランディングページであるメインのインデックスページがあります。これは、連絡先や情報などの静的ページです。

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 に答える