트위터 부트 스트랩이있는 전신 배경

트위터의 부트 스트랩 프레임 워크를 사용하여 새 프로젝트를 작성하려고하는데 문제가 있습니다. 나는 전신 배경을 원하지만, 배경은 컨테이너 div의 높이로 제한되는 것처럼 보인다. 다음은 HTML/CSS 코드입니다.트위터 부트 스트랩이있는 전신 배경

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='UTF-8'> 
     <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> 
     <title>Bootstrap Issue</title> 
     <style> 
      body { background: black; } 
      .container { background: white; } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <h1> Hello, World!</h1> 
     </div> 
    </body> 

</html>

전체 화면을 차지하려면 어떻게해야합니까?

출처

2011-09-27 GSto

는이 작업을 추가하거나 필요

html { background: transparent }

또는이 할 괜찮 대신 html에서 "페이지 배경"(background: black)을 설정합니다.

왜?

html,body{background-color:#ffffff;}

(명심 기본 background 값 transparent)이 문제가 참조하는 이유에 대한 자세한 내용은

: What is the difference between applying css rules to html compared to body?

참고이 더 이상되는 부트 스트랩 내부,이 없다 부트 스트랩 3 이상으로 문제가 발생했습니다.

출처

2011-09-27 13:14:49 thirtydot

아마, 그는 배경을 위해 이미 부트 스트랩 색상을 무시하고 있습니다. –

@EvanCarroll : 예, 그는 있었지만 그에게는 효과가 없었습니다. 이 질문에 대해 묻고있는 문제를 이해하지 못하고 있습니다. – thirtydot

CSS에서 HTML 및 본문의 높이를 100 %로 설정합니다.

html, body { height: 100%; }

그러면 작동합니다. 문제는 신체의 높이가 화면 전체의 높이가 아닌 내용의 높이로 자동 계산된다는 것입니다.

출처

2011-09-27 12:18:08

거의 작동하지만 padding-top : 60px (상단에 컨테이너 위에 표시되는 것을 방지하기 위해) 하단에 60px의 추가 높이가 생성되어 배경. CSS에서 "100 % -60px"를 어떻게 수행합니까? – aalaap

편집 : 이것은 jQuery - $ ("body")를 사용하여 수행 할 수 있습니다. css ("height", ($ (window) .height() - 60) + "px"); 누구나 이것을 달성하기위한 순수 CSS 방법이 있습니까? – aalaap

html, 본문 { 신장 : 100 %;/*이 하나가 먼저 있는지 확인 */ 최소 높이 : 100 %; } – DrewRobertson93

/* 여기에 순수 CSS 솔루션 */

<style type="text/css"> 
     html, body { 
     height: 100%; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     } 

     #full-screen-background-image { 
     z-index: -999; 
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto; 
     position: fixed; 
     top: 0; 
     left: 0; 
     } 

     #wrapper { 
     position: relative; 
     width: 800px; 
     min-height: 400px; 
     margin: 100px auto; 
     color: #333; 
     } 

     a:link, a:visited, a:hover { 
     color: #333; 
     font-style: italic; 
     } 

     a.to-top:link, 
     a.to-top:visited, 
     a.to-top:hover { 
     margin-top: 1000px; 
     display: block; 
     font-weight: bold; 
     padding-bottom: 30px; 
     font-size: 30px; 
     } 

    </style> 
    <body> 
    <img src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
    <p>Content goes here...</p> 
    </div> 
</body>

출처

2013-06-07 02:33:17

그것은 나를 위해 작동, 감사합니다! – Juck

<style> 
     body { background: url(background.png); } 
     .container { background: ; } 
</style>

당신이

출처

2013-07-01 21:37:28 cflo

가장 좋은 방법은

.content{ 
    background-color:red; 
    height: 100%; 
    min-height: 100vh; 
}

것이다하려면이 배경 이미지 작동의 부트 스트랩에서 자동으로 veiwport 높이 (Vh)를 취합니다.

출처

2015-08-03 05:49:54

트위터 부트 스트랩이있는 전신 배경

답변

관련 문제