full body background image with twitter bootstrap

Question

I am trying to implement full body background image with twitter bootstrap but it is not working i am checking in full screen mode it is working in the mobile and tablet mode.

this is the html

    <div id="header">

  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hifzil</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Spelling Test</a></li>
            <li><a href="#contact">Practise Writing</a></li>
           <li><a href="#about">Spelling Game</a></li>
            <li><a href="#contact">English Dictionary</a></li>
               <li><a href="#about">Games</a></li>
            <li><a href="#contact">Support</a></li>

         </ul>
              <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

        <div id="boundry">
        <div class="searchbutton">  <a href="dic.php">Click Here To Start E-learning Drive !</a></div>      

            </div>
            </div>


<div class="col-md-9 text-center col-centered">
<div class="grade-module intro1">  <a href="#" class="gradeStyle blue1-bg">English</a> <div class="bd-grade blue1-bdr">
            <p class="text">Counting objects, fewer and more, names of colors, inside and outside, longer and shorter, and more.</p>
        </div>
        </div>
        <div class="grade-module intro2">
          <a href="dic.php" class="gradeStyle orange1-bg">Dictionary</a> <div class="bd-grade orange-bdr"><p class="text">Learn New Words From Dictionary And Their Meanings,Parts Of Speeches And Their Visualization</p></div>
         </div>
         <div class="grade-module intro3">
          <a href="paint.php" class="gradeStyle green-bg">Speeling Practice</a> <div class="bd-grade green-bdr"><p class="text">Practice Speelings By Drawing The Words . All you have to paint inside the letter not outside</p></div>
         </div>
         <div class="grade-module intro4">
          <a href="#" class="gradeStyle red-bg">Quiz</a> <div class="bd-grade red-bdr"><p class="text">Speeling quiz can provide you the opportunity to revise whether you have correctly memorize or not </p></div>
         </div>
         <div class="grade-module intro5">
          <a href="#" class="gradeStyle light-bg">Games</a> <div class="bd-grade light-bdr"><p class="text">Learning by increasing vocubulary from playing games like words search , scrabble and letterrace .</p></div>
         </div>
           <div class="grade-module intro6">
          <a href="#" class="gradeStyle voilet-bg">Visualization</a> <div class="bd-grade voilet-bdr"><p class="text">Visualization of words tends to lead towards learning and memorizing the words , their description and meaning</p></div>
         </div>
</div>

this is the css

#header{
    background: url('..images/english.jpg') no-repeat center top;
    padding-top: 200px;
    text-align: center;
    background-attachment: relative;
    background-position: center center;
    min-height: 670px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

Answer 1

With position: absolute; you can do it.

Use a margin-top: 100vh; on the second div which contain content to get what you wants, I think :

#content { margin-top: 100vh}

Updated fiddle

Answer 2

You can do like this.

Side note, since the bkg as positioning, also the other direct children of the body need to, or else they appear beneath, hence the added body > * { position: relative; } body > * { position: relative; } rule.

 html, body { margin: 0; } body > * { position: relative; } #bkg { position: fixed; /* or use absolute if it should scroll with content */ left: 0; top: 0; right: 0; bottom: 0; background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat center center; background-size: cover; opacity: 0.3; /* temp. added to make text appear better */ } 

 <div id="bkg"></div> <div id="header"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Hifzil</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Spelling Test</a></li> <li><a href="#contact">Practise Writing</a></li> <li><a href="#about">Spelling Game</a></li> <li><a href="#contact">English Dictionary</a></li> <li><a href="#about">Games</a></li> <li><a href="#contact">Support</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div id="boundry"> <div class="searchbutton"> <a href="dic.php">Click Here To Start E-learning Drive !</a></div> </div> </div> <div class="col-md-9 text-center col-centered"> <div class="grade-module intro1"> <a href="#" class="gradeStyle blue1-bg">English</a> <div class="bd-grade blue1-bdr"> <p class="text">Counting objects, fewer and more, names of colors, inside and outside, longer and shorter, and more.</p> </div> </div> <div class="grade-module intro2"> <a href="dic.php" class="gradeStyle orange1-bg">Dictionary</a> <div class="bd-grade orange-bdr"><p class="text">Learn New Words From Dictionary And Their Meanings,Parts Of Speeches And Their Visualization</p></div> </div> <div class="grade-module intro3"> <a href="paint.php" class="gradeStyle green-bg">Speeling Practice</a> <div class="bd-grade green-bdr"><p class="text">Practice Speelings By Drawing The Words . All you have to paint inside the letter not outside</p></div> </div> <div class="grade-module intro4"> <a href="#" class="gradeStyle red-bg">Quiz</a> <div class="bd-grade red-bdr"><p class="text">Speeling quiz can provide you the opportunity to revise whether you have correctly memorize or not </p></div> </div> <div class="grade-module intro5"> <a href="#" class="gradeStyle light-bg">Games</a> <div class="bd-grade light-bdr"><p class="text">Learning by increasing vocubulary from playing games like words search , scrabble and letterrace .</p></div> </div> <div class="grade-module intro6"> <a href="#" class="gradeStyle voilet-bg">Visualization</a> <div class="bd-grade voilet-bdr"><p class="text">Visualization of words tends to lead towards learning and memorizing the words , their description and meaning</p></div> </div> </div>