将backgrond延伸到父级宽度之外html css_Html_Css_Background

将backgrond延伸到父级宽度之外html css

html css

将backgrond延伸到父级宽度之外html css,html,css,background,Html,Css,Background,我想拉伸背景色（或图像），使其看起来像中的底部示例代码相同，但此处：例1： <div class="fixed_width"> <div class="header">Header</div> <div class="menu"> Here be some menu </div> <div class="content"> Here be some content<br/&

我想拉伸背景色（或图像），使其看起来像中的底部示例

代码相同，但此处：例1：

<div class="fixed_width">
  <div class="header">Header</div>
  <div class="menu">
      Here be some menu
  </div>
  <div class="content">
      Here be some content<br/>
      ANd even more
  </div>
</div>

下面的例子是我想到的，但问题是浏览器想要滚动到右边的2000px

页面的结构类似于JSFIDLE中的代码，正如您所看到的，不知道菜单顶部的确切位置-在它上面有一个可以具有可变高度的标题（因此我不能使用一个漂亮的预先生成的整个页面背景图像）

我不能禁用滚动，因为在较小的屏幕上ppl将无法滚动。请帮助我解决这个问题（如果可能）。

将菜单放在一个包装元素中，给后者100%的宽度（假设它是最上面的元素），并将菜单居中：

HTML:

不幸的是，如图所示，Menu不是top元素，它已经在“fixed_width”元素中。您不能将“fixed_width”div本身包装起来吗？i、 e.为每个背景创建不同的包装器：标题包装器、内容包装器等。如果没有其他方法，那么我想我必须这样做，但我希望避免这种情况，如果可能的话，我想改变结构不是什么大不了的事。谢谢

<div class="fixed_width">
  <div class="header">Another<br/>Header</div>
  <div class="menu2">
      Here be some menu
  </div>
  <div class="content">
      Here be some content<br/>
      ANd even more
  </div>

body {background: lightgray}
.fixed_width {width: 500px; border: solid thin black; 
  margin: 20px auto; background: white;}
.menu {background: blue; color: white; padding: 20px; 
  margin-bottom: 10px;}
.content {background: white; border: solid thin gray; 
  margin: 5px;}

.menu2 {width: 500px; background: blue; color: white; 
  margin-bottom: 10px;padding: 20px 2000px 20px 2000px; 
  margin-left: -2000px;}

  <body>
     <div id="menu_wrapper">
        <ul id="menu">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
        </ul>
      </div>
  </body>

  #menu_wrapper {
  width:100%;
  background:blue;
  }
  #menu 
  width:1000px;
  margin:0 auto;
  }