Блог

Главная - Вопросы по программированию - Как всегда показывать всю высоту и ширину фонового изображения, используемого в Bootstrap 4 Jumbotron?

Как всегда показывать всю высоту и ширину фонового изображения, используемого в Bootstrap 4 Jumbotron?

#html #css #bootstrap-4 #responsive-design

#HTML #css #bootstrap-4 #адаптивный дизайн

Вопрос:

Я много искал решение, в том числе читал похожие вопросы здесь, в stackoverflow, но не могу найти ответ. Мы используем Bootstrap 4.5.1 и имеем jumbotron div с фоновым изображением 1920×800, которое должно отображать всю высоту и ширину изображения для всех точек просмотра. Я нашел близкие решения, но они либо обрезают стороны изображения jumbotron, либо обрезают нижнюю часть изображения, либо под изображением jumbotron добавляется много места при просмотре на небольших устройствах.

Вот что у нас есть на данный момент:

CSS

 .jumbotron {
    border-radius: 0;
    margin-bottom: 0;
    background: url(../img/jumbotronbackground.jpg) no-repeat;
    background-size: cover;
}

HTML

 <body>
   <div class="jumbotron bg-cover">
      <div class="container-fluid p-0">
         <div class="container bodyCopy">
            <div class="overlay"></div>
            <div class="row">
               <div class="col-sm-12" style="max-width:760px;">
                  <div class="container">
                     <div class="row">
                        <div class="col-sm-12">
                           <div class="card-body-right">
                              <h1 class="card-title">Headline goes here</h1>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-lg-12">
            <p>More content goes down here, but it needs to be flush against the bottom of the jumbotron.</p>
         </div>
      </div>
   </div>

Комментарии:

1. итак, я думаю, вам нужно поместить изображение в div вместо тела? вы пробовали использовать эти строки css? .jumbotron: { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } а затем для body { background-color: transparent; }

2. Спасибо за ответ. Это не помогло. Я поместил его за пределы .container-fluid, чтобы не было контейнера для предотвращения его полной высоты и ширины.

3. Каков фактический размер изображения?

4. 1920×800 — я должен добавить его в качестве фона, поскольку есть наложение текста.