全身の背景イメージとtwitterのブートストラップ

Question

私は全身の背景イメージをtwitterのブートストラップで実装しようとしていますが、動作しません。フルスクリーンモードでチェックしています。

これは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> 

ですこれは、あなたがそれを行うことができますposition: absolute;で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

です。

マージントップ：100vhを使用してください。あなたが欲しいものを手に入れるためにコンテンツを含んで第二のdivに、私は思う：

#content { margin-top: 100vh} 

Updated fiddle

Answer 2

あなたはこのように行うことができます。

サイドノート、ポジショニングなどbkgいるので、またbodyの他の直接の子のようにする必要があり、さもなければ、彼らは追加body > * { position: relative; }ルールしたがって、下に表示されます。

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>