Bootstrap整頁背景

我一直在Bootstrap中打開一個完整頁面的背景圖片。目前背景圖片覆蓋了網頁的90％，但我無法獲得網頁的最後10％。它的行爲就像某處有一個底部邊距，但沒有。Bootstrap整頁背景

HTML：

<body> 

    <div class="jumbotron"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="text-center"> 
      <h1 style="font-weight: 400;" class="headline"><br></h1> 
      <h2 style="font-weight: 400;" class="tagline"></h2> 
      </div> 
     </div> 
     </div> 

     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
      <div class="embed-responsive embed-responsive-16by9"> 
      <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/139447981" id="video"></iframe> 
      </div> 
      </div> 

     <div class="col-sm-6"> 
      <div class="text-center"> 
      <h3><%= t('.call_to_action_headline') %></h3><br> 
      <h4 class="counter">123</h4> 
      <p><%= t('.endline') %></p> 

      <div class="subscribe text-muted text-center"> 
       <%= form_for @user do |f| %> 
       <div class="row"> 
        <div class="col-xs-12"> 
        <div class="input-group"> 
         <%= f.text_field :email, class: 'form-control form-control-lg', 
         placeholder: 'Your email' %> 
         <span class="input-group-btn"> 
         <%= f.submit t('.submit_button'), class: 'btn btn-primary btn-lg' %> 
         </span> 
        </div> 
        </div> 
       </div> 
       <% end %> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

CSS：

@import url(https://fonts.googleapis.com/css?family=Lora:400,700); 

@import "bootstrap"; 
@import "font-awesome"; 

body { 
    background-color: #ffffff; 
} 

.headline { 
    margin-top: 80px; 
    color: white; 
} 

h3 { 
    color: white; 
} 

#video { 
    margin-bottom: 300px; 
} 

p { 
    color: white; 
} 

.counter { 
    font-size: 5rem; 
    color: white; 
} 

.tagline { 
    margin-top: 20px; 
    margin-bottom: 100px; 
    color: white; 
} 


.jumbotron { 
    background: image-url('home-bg-1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    height: 100%; 
    background-color: #ffffff; 
    color: #ffffff; 
    text-align: center; 
    text-shadow: 0 1px 3px rgba(0,0,0,.5); 

    .jumbotron-text { 
    min-height: 25rem; 
    padding-top: 8rem; 
    padding-bottom: 6rem; 

    .container { 
     max-width: 50rem; 
    } 
    } 
}

我想有一個全屏幕的背景圖像。下面是它的外觀：http://imgur.com/sdHJeZO

感謝

來源

2016-01-04 Andy

嘗試'min-height：100vh;'on'.jumbotron'並移除'height：100％;' –

成功！謝謝！ :-) – Andy

默認情況下，大多數瀏覽器中，可能會導致你的問題有一定的保證金增加。

就拿這首小提琴：https://jsfiddle.net/n874j2yy/，如果您使用Chrome工具或您的瀏覽器檢查檢查內容區域，加入到<body>標籤保證金的8像素，這意味着.test DIV不跨越相當，你會發現有視口的整個寬度。

鑑於在本例中，我已經使用了視口高度/視口寬度值：height: 100vh/width: 100vw。 https://jsfiddle.net/7u2yod66/1/。我也加入margin: 0

而是對.jumobtron使用height: 100%重寫瀏覽器的默認<body>保證金，請嘗試使用height: 100vh，並且還從<body>標籤手動刪除保證金（margin: 0）

來源

2016-01-04 16:09:47

還有一種辦法可以把一個網站上的背景圖像一直覆蓋整個瀏覽器窗口，只使用CSS。

適用於Chrome，Firefox 3.6+，Opera 10+和IE9 +。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Example

其他整個頁面的背景伎倆here。

來源

2016-01-04 17:34:45 aquartier

如果您有雙顯示器，這不起作用 - 如果您將瀏覽器窗口擴展到兩臺顯示器，則最大背景圖像尺寸只會增加到單個顯示器的尺寸。 – astralmaster

Bootstrap整頁背景

回答

相關問題