CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nur Rony
Nur Rony

Reputation: 8083

fixed width background image for bootstrap navbar

How can i set a fixed width image of 790px? how can i make it responsive where full image is shown as well? my code is like bellow.

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

my css is:

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

}

here is my image nav bg when i see it in iPad or iPhone, it cuts the image (button on two side) and showing parts. like bellow.. After resize window what i am doing wrong?

Upvotes: 1

Views: 9468

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62743

You'll need to use the CSS3 background-size property, and set it to cover. As João pointed out, this will only work in browsers that support this property (IE9+, Firefox 4+, Opera, Chrome, and 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;
}

Here's a jsFiddle showing it in action.

Upvotes: 2

Related Questions