容器中的％100背景图像以及如何将页面宽度缩放到页面

Question

在500px容器div中重复-x背景图像，如何将背景图像缩放到页面宽度。我很抱歉我的英语不好。看看下面的图片来了解我的情况。

.container {
width: 500px;
height: 60px;
background-color:#f2d88c;
}

.menubg {
width: 100%;
height: 30px;
background-image: url(bg.jpg)  center repeat-x;
}

Answer 1

http://jsfiddle.net/PjGqv/9/

你的div.menubg是div.container的子元素子元素不能宽于500px宽度的父元素。

如果父元素相对于具有100％宽度的位置，则可以使用绝对定位。我已经加入了一个jsfiddle

但是使用position：absolute;你是把孩子带出父母的容器。根据您的具体情况，您必须调整其位置值。

.menubg {
  position: absolute;
  width: 100%;
  height: 30px;  
  background-image: url(bg.jpg)  center repeat-x;
}

Answer 2

尝试添加：

background-size: cover;

到.menubg

Answer 3

你可以使用3个元素，

<div class="container">
    <div class="bg"></div>
    <div class="menubg"></div>
</div>

并使用此css

.container
{
   position:relative ; 
   display:block;
   height: 60px;
   width:100%;
   text-align:center;
   padding:0;
}

.bg
{
   background-color:#f2d88c;
   position:relative;
   height:60px;
   width:500px;
   margin:0 auto;
}

.menubg{
     position:absolute;
     width:100%;
     top:15px;
     height:30px;
     display:block;
     text-align:center;
     background-image: url(bg.jpg)  center repeat-x;
}