0

body の幅を 1920px に設定し、同じ幅の background-image を設定します。画像はヘッダー用です。ボディ内のラッパーが狭いため、ヘッダーの背景をヘッダー自体に配置すると、ヘッダーの背景の幅がラッパーの境界線によって切り取られます。本文に配置しましたが、下部に水平スクロールバーがあり、ページの中央が右に移動しました。そのスクロールバーを取り除き、ページを中央に配置するにはどうすればよいですか? コードは次のとおりです。

body {
    background-color: #f6f6f6;
    background-image: url('../img/menu-background.png');
    width: 1920px;
    background-repeat: no-repeat;
    font-family: 'PT Sans';
}

.wrapper {
    width: 950px;
    min-height: 1658px;
    border: 1px solid grey;
    margin: 0 auto;
}

header a {
    text-decoration: none;
    text-align: center;
    display: block;
    width: 365px;
    margin-left: auto;
    margin-right: auto;
}

そしてHTML：

<body>
    <div class="wrapper">
        <header>
            <a href="#">
                <h1>Lorem ipsum</h1>
                <span>bla-bla-bla</span>
            </a>
        </header>
4

2 に答える 2

3

本文の幅を 1920px に指定する必要はありません。

より大きな解像度の画面を使用しているユーザーは、いずれにせよ背景画像全体を見ることになります。

次のように、背景画像タグを 1 行に設定することをお勧めします。

body {
    background: #f6f6f6 url('../img/menu-background.png') no-repeat center 0;
}
于 2013-02-21T14:53:29.600 に答える
2

overflow-x:hidden;bodyに追加することで、スクロールバーを防ぐことができ ます

于 2013-02-21T14:57:37.287 に答える