CSS - 如何拉伸菜单的背景

Question

你好，

有人可以帮助我，我怎么能拉伸菜单的背景（从左到右的全宽）？ 我是初学者。

谢谢。

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#menu { 
    width:100%; 
    margin: 0px; 
    background-color: #3d56ac; 
    background-image: linear-gradient(#444, #111); 

} 

#menu:before, 
#menu:after { 
    content: ""; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu { 
    zoom:1; 
} 

#menu li { 
    float: left; 
    border-right: 1px solid #222; 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
} 

#menu a { 
    float: left; 
    padding: 12px 30px; 
    color: #FFF; 
    text-transform: uppercase; 
    font: bold 12px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #111; 
} 

#menu li:hover > a { 
    color: #fafafa; 
} 

*html #menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 

#menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1;  
    background: #444; 
    background: linear-gradient(#444, #111); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px; 
    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#menu ul ul { 
    top: 0; 
    left: 150px; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/ 
    box-shadow: -1px 0 0 rgba(255,255,255,.3);  
} 

#menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 

#menu ul li:last-child { 
    box-shadow: none;  
} 

#menu ul a {  
    padding: 10px; 
    width: 130px; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

#menu ul a:hover { 
    background-color: #0186ba; 
    background-image: linear-gradient(#04acec, #0186ba); 
} 

#menu ul li:first-child > a { 
    border-radius: 3px 3px 0 0; 
} 

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #444; 
} 

#menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0; 
    border-bottom: 6px solid transparent; 
    border-top: 6px solid transparent; 
    border-right: 6px solid #3b3b3b; 
} 

#menu ul li:first-child a:hover:after { 
    border-bottom-color: #04acec; 
} 

#menu ul ul li:first-child a:hover:after { 
    border-right-color: #0299d3; 
    border-bottom-color: transparent; 
} 

#menu ul li:last-child > a { 
    border-radius: 0 0 3px 3px; 
} 

Answer 1

这应该工作：

#menu { 
    background-size: 100%; 
} 

Answer 2

你需要修复的图像的宽度......如果你想伸展背景图像...

**CSS** 
    background-image: url("menu.png"); 
    background-size: 875px 125px; 
    background-repeat: no-repeat; 

希望这会帮助你...

还是你可以试试...

/CSS

body{margin: 0 auto;} 
    .menu100percent { 
    background: #3584b4; /* Old browsers */ 
    background: -moz-linear-gradient(top, #3584b4 0%, #25567f 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3584b4), color-stop(100%,#25567f)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #3584b4 0%,#25567f 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #3584b4 0%,#25567f 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #3584b4 0%,#25567f 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #3584b4 0%,#25567f 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3584b4', endColorstr='#25567f',GradientType=0); /* IE6-9 */ 
    color: white; 
    font-size: 16px; 
    height: 37px; 
    width:100%; 
} 
    .menu{width:1000px; margin: 0 auto; } 
    .menu a{color:#fff; font-size:12px; line-height:37px; font-family:Arial; text-decoration:none;} 

/HTML

<div class="menu100percent"> 
    <div class="menu"> 
     <a href="/Purchase.aspx">Shop</a> 
    </div> 
</div> 

DEMO HERE