Div off page with a bg image，如何不滚动页面

Question

我已经创建了一个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;
}

Answer 1

如果不设置宽度和边距，就不会达到需要设置父级溢出的地步。背景居中，而不是元素本身(带有负边距)，你可以省略这一点，浏览器自己来做。没有滚动条。

#headerBg {
    background-image: url('img/headerBg.gif');
    background-position: top center;
    height: 362px;
}

Answer 2

你需要做的就是给它一个自动的页边距，使它在页面居中。这样你就不需要左边距了，因为左边距会使它滚动。

Answer 3

您只需在CSS声明中添加以下内容：

#page {
    overflow-x:hidden;
}

它会禁用由于图像过大而导致的滚动条渲染。请参阅http://jsfiddle.net/uXFT4/

请注意，并不是所有浏览器都支持overflow-x和overflow-y。如果可能，请使用overflow。