Bootstrap Full Page Background

Я боролся с полным фоном страницы страницы в Bootstrap. В настоящее время фоновое изображение охватывает 90% страницы, но я не могу получить последние 10% страницы. Он ведет себя так же, как где-то есть нижний край, но нет.Bootstrap Full Page Background

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;' на '.jumbotron' и удалите' height: 100%; ' –

Успех! Благодаря! :-) – Andy

По умолчанию большинство браузеров добавляют в определенном количестве прибыли, которая может быть причиной вам проблемы.

Возьмите эту первую скрипку, например: https://jsfiddle.net/n874j2yy/, если вы проверяете область содержимого с помощью инструментов Chrome или ваш браузер инспектора, вы заметите, что есть 8px маржи добавляется к <body> тега, означая .test ДИВ не охватывает достаточно всю ширину окна просмотра.

Принимая во внимание, что в этом примере я использовал значения высоты видового экрана/высоты видового экрана: height: 100vh/width: 100vw. https://jsfiddle.net/7u2yod66/1/. Я также перекрываться браузера по умолчанию <body> маржу путем добавления margin: 0

Вместо использования height: 100% на .jumobtron, попробуйте использовать 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 Full Page Background

ответ

Смежные вопросы