Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 799
zack Avatar asked Jul 13 '14 10:07

zack


People also ask

How do you put a full background image on HTML?

The most common & simple way to add background image is using the background image attribute inside the <body> tag. The background attribute which we specified in the <body> tag is not supported in HTML5.

How do I add a background image to a container in bootstrap?

Just add . bg-img class on your <img> element and .has-bg-img class to parent element that you want to apply a background image. Images are part of the DOM and are transformed into CSS background-image after they are fully loaded.


1 Answers

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;}
    
like image 171
Anju Aravind Avatar answered Oct 25 '22 02:10

Anju Aravind