用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圖像劃分頁面，如何不滾動頁面

回答

相關問題