부트 스트랩 점보 트론 배경 이미지 반응이 없음

저는 부트 스트랩에 익숙하지 않아서 점보 트론 배경 이미지를 흰색 배경을 표시하지 않고 올바르게 확장하려고 애 쓰고 있습니다. 부트 스트랩 고정 탐색 (Bootstrap Fixed Nav)을 페이지의 맨 위에, 점보 트론 (bumb) 이미지 (bg 이미지)를 중간에 사용하고 있으며, 스티키 바닥 글을 사용하고 있습니다. 레이아웃이 올바른지 확인하기 위해 Google 크롬에서 테스트 할 때 이미지가 바닥 글의 맨 아래까지 늘어나지 않는 것처럼 보입니다. 흰색 배경을 보여줍니다. 모든 장치에서 배경 이미지를 올바르게 확장하려면 어떻게해야합니까?부트 스트랩 점보 트론 배경 이미지 반응이 없음

HTML :

<!-- Fixed navbar --> 
    <nav class="navbar navbar-default 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="index.html">Jason<span>Murray</span></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Portfolio</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="jumbotron"> 
     <div class="container"> 
     <h1 class="text-center">Front-End Web Developer</h1> 
     <p class="text-center">I'm Jason Murray, Front-End Web Developer who loves to write clean codes and build simplistic web designs.</p> 
     <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Recent Work</a></p> 
     </div> 
    </div> 

    <footer class="footer"> 
     <div class="container"> 
     <p class="text-center">Copyright &copy; 2016 <a href="index.html" target="_blank">Jason Murray Web Design</a>. All Rights Reserved</p> 
     </div> 
    </footer> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

CSS: 

.jumbotron { 
    background: url("../img/lucho-49.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

출처

2016-08-06 Jason Murray

가이 jumbotron 클래스에 마진 바닥, 그래서 margin을 제거 : 이미지가 확장되지 않습니다 fiddle link

출처

2016-08-06 21:19:32

안녕하세요. 응답 해 주셔서 감사합니다. 불행하게도 그것은 작동하지 않았다. 내 배경 이미지가 최대 높이를 보이지 않는 것처럼 보입니다. –

@JasonMurray, 귀하의 필요에 따라, 바닥 글 상단의 공백을 제거하는 것이 맞습니까? 너 또 무슨 짓을하려는거야? –

@JasonMurray, 업데이트 된 바이올린 링크에서 다시 확인하십시오! –

: 여기

.jumbotron { 
    margin-bottom: 0; 
}

이 바이올린입니다 바닥 글의 맨 아래까지는 점보 트론의 미리 정의 된 속성 때문에 발생합니다. 여백 -b ottom : 30px;. 당신의 CSS 코드에서

다음을 수행 변경 :

nav + .jumbotron { 
    margin-bottom: 0; 
    background: url("../img/lucho-49.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

당신이 마진 - 하단에 추가하는 경우 : 0; .jumbotron 선택기에이 있으면 특이성으로 인해 작동하지 않습니다. 따라서 Adjacent 형제 선택기를 nav.jumbotron에 추가하여 CSS 속성을 미리 정의 된 부트 스트랩의 .jumbroton CSS 속성으로 무시하십시오.

출처

2016-08-06 22:04:30

부트 스트랩 점보 트론 배경 이미지 반응이 없음

답변

관련 문제