固定宽度背景图像自举导航栏

Question

我如何设置790px的固定宽度图像？我怎么能使它响应在全图像显示以及？我的代码像波纹管。

<div class="span10 offset1"> 
       <div class="navbar"> 
       <div class="navbar-inner"> 
        <div class="container"> 
         <div style="text-align: center"> 
          <ul class="nav"> 
           <li class="active"><a href="#">Home</a></li> 
           <li><a href="#about">About</a></li> 
           <li><a href="#contact">Contact</a></li> 

          </ul> 

         </div> 
        </div> 
       </div> 
      </div> 
    </div> 

我的CSS是：

.navbar-inner{ 


    background-color: transparent; 
    background-image: url("../img/nav_bg.png"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    height: 62px; 
    width:88%; 
    text-align: center; 
    margin: 0 auto; 
    min-width: 320px; 
    max-width: 790px; 
    border: 0; 

} 

这里是我的形象 当我在iPad或iPhone上看到它，它减少了图像（按钮两侧）和显示部件。像波纹管.. 我做错了什么？

Answer 1

您需要使用CSS3 background-size属性，并将其设置为cover。正如João指出的那样，这只会在支持此属性的浏览器（IE9 +，Firefox 4 +，Opera，Chrome和Safari 5+）中发挥作用。

HTML

<div class="span10 offset1"> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <div style="text-align: center"> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.navbar-inner { 
    background-size:cover; 
} 

这里有一个jsFiddle showing it in action。