CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
zack
zack

Reputation: 484

full screen responsive background image with bootstrap

I'm new to twitters bootstrap. What want to know is the HTML mockup that i have to use for a full screen responsive background image with bootstrap?

certainly I'm suing the mockup

<div class="container-fluid">

<div class="wrapper">

</div>


</div>

Before the wrapper i do have a navigation menu. I want to add a full screen image to div class wrapper. and i want wrapper div to scale 100%. any tips will be greatly appreciated.

Upvotes: 11

Views: 60332

Answers (1)

Anju Aravind
Anju Aravind

Reputation: 3362

Two options

  1. use img-responsive class if you are using tag.

    <div class="wrapper">
   <img src="pic_1.jpg" class="img-responsive" alt="Responsive image">
</div>

  2. if you are using css use this.

    .wrapper{background: url('/assets/64531/green_suburb.jpg') no-repeat   center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

Upvotes: 23

Related Questions