固定宽度背景图像为bootstrap导航栏

时间:2013-03-14 15:47:18

标签: html css twitter-bootstrap

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

}

这是我的形象 nav bg 当我在iPad或iPhone上看到它时,它会切割图像(两侧的按钮)并显示部件。像波纹管..   After resize window 我做错了什么?

1 个答案:

答案 0 :(得分:2)

您需要使用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