Html 引导导航栏的固定宽度背景图像

如何设置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>

这是我的照片 当我在iPad或iPhone上看到它时，它会剪切图像（按钮在两侧）并显示部件。像贝娄一样。。

---

我做错了什么？

您需要使用CSS3

背景大小

属性，并将其设置为

封面

。正如João所指出的，这只适用于支持此属性的浏览器（IE9+、Firefox 4+、Opera、Chrome和Safari 5+）

HTML

---

这是一个。

@dewoody它在这里工作。我能看见，但我看不见，奇怪！！！。请看我的编辑。。

.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;

}

<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>

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