用bg图像划分页面，如何不滚动页面

我创建了一个2268px宽的页眉图像，中间有一个正常的页眉，然后是一个背景页面（支持更大的显示器，如苹果电脑）。用bg图像划分页面，如何不滚动页面

我在父元素上设置了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; 
}

来源

2013-02-08 Josh Boothe

对不起应该说，溢出-X是隐藏在父，但你仍然可以鼠标滚轮到div –

的边缘，你可以做一个的jsfiddle？ – reinder

您的'margin-left：-633px;'正在导致滚动。 – Vucko

通过不设置宽度和边距，您不会达到需要设置父项溢出的点。定位背景为中心，而不是元素本身（负边距），您可以将其忽略，浏览器自行完成。没有滚动条。

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

来源

2013-02-08 11:26:28 MildlySerious

你需要做的是给它一个自动边缘到中心在网页上。这样你就不需要留下余裕，这会导致它滚动。

来源

2013-02-08 10:52:02 coldpumpkin

但它仍然具有允许滚动的宽度集？ –

这就是为什么你需要禁用溢出，如你所说：http://jsfiddle.net/gfubW/2/ – coldpumpkin

您应该简单地添加以下到您的CSS声明：

#page { 
    overflow-x:hidden; 
}

它禁用造成过大的图像滚动条的渲染。请参阅http://jsfiddle.net/uXFT4/

请注意，overflow-x和overflow-y可能不支持您希望其工作的所有浏览器。如果可能，请使用overflow。

来源

2013-02-08 11:06:03 Mike

用bg图像划分页面，如何不滚动页面

回答

相关问题