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