0

幅 2268px のヘッダー画像を作成しました。通常のヘッダーが中央にあり、背景がページの外に出ています (Mac などの大型モニターのサポート)。

親要素を設定overflow-x: hiddenしましたが、まだスクロールできます。したがって、基本的には、ページが不安定にならない背景画像を作成しようとしています。

HTML:

<div id="page" class="hfeed">
<div id="headerBg">
    </div><!-- End #headerBg -->
    <header id="branding" role="banner">
            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->

CSS

#headerBg{
    position: relative;
    background-image: url('img/headerBg.gif');
    margin-left: -633px;
    height: 362px;
    width: 2268px;
}
4

3 に答える 3

0

幅とマージンを設定しないと、親のオーバーフローを設定する必要があるポイントに到達しません。要素自体の代わりに背景を中央に配置する(負のマージンを使用)と、それを省略でき、ブラウザーがそれを行います。スクロールバーなし。

#headerBg {
    background-image: url('img/headerBg.gif');
    background-position: top center;
    height: 362px;
}
于 2013-02-08T11:26:28.413 に答える
0

CSS 宣言に以下を追加するだけです。

#page {
    overflow-x:hidden;
}

特大の画像によって引き起こされるスクロールバーのレンダリングを無効にします。http://jsfiddle.net/uXFT4/を参照してください

overflow-xandoverflow-yは、動作が期待されるすべてのブラウザーでサポートされているわけではないことに注意してください。overflow可能であれば使用してください。

于 2013-02-08T11:06:03.250 に答える
0

あなたがする必要があるのは、ページの中央に自動マージンを与えることです. そうすれば、スクロールの原因となっている margin-left は必要ありません。

于 2013-02-08T10:52:02.930 に答える