0

我创建了一个 2268 像素宽的标题图像，中间有一个普通标题，然后是页面外的背景（支持更大的显示器，如 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

您需要做的是给它一个自动边距以使其在页面上居中。这样你就不需要margin-left，这会导致它滚动。

于 2013-02-08T10:52:02.930 回答
0

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

#page {
    overflow-x:hidden;
}

它禁用了由过大图像引起的滚动条的渲染。见http://jsfiddle.net/uXFT4/

请注意，overflow-x您overflow-y希望它工作的所有浏览器都可能不支持它。overflow尽可能使用。

于 2013-02-08T11:06:03.250 回答
0

通过不设置宽度和边距，您无法达到需要设置父母溢出的程度。将背景居中放置，而不是元素本身（带有负边距），您可以将其省略，浏览器自己完成。没有滚动条。

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