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整页背景

回答

相关问题