Bootstrap 將背景圖像添加到部分

Question

所以我一直在嘗試將圖像添加到 Bootstrap 4 中的一行。問題是它只占用了該部分的一個正方形而不是整個行。 我相信我以前做過，但我不記得我是怎么做的（當然）。 我認為這很容易實現，但我想不會。 到目前為止，這是我的代碼：

 /* Center align the text within the three columns below the carousel */.marketing.col-lg-4 { margin-bottom: 1.5rem; text-align: center; }.marketing h2 { font-weight: 400; }.marketing.col-lg-4 p { margin-right: .75rem; margin-left: .75rem; } #bg-img { background-color: #E6F1FF; background-image: url('http://placekitten.com/600/800'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 20%; background-size: cover; color: #323840; height: 1148px; }.value-heading { color: #323840; text-align: center; font-size: 34px; font-family: 'Inter-SemiBold', Arial, sans-serif; font-weight: 600; line-height: 41.15px; }.value-description { font-family: 'Inter-Regular', Arial, sans-serif; color: #323840; text-align: center; font-size: 24px; line-height: 36px; }.section-heading { color: #043B7C; text-align: center; font-size: 46px; font-family: 'Inter-Medium', Arial, sans-serif; font-weight: 500; line-height: 60px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main role="main"> <div class="container marketing" > <div id="bg-img"> <div class="pricing-header mx-auto text-center" > <h1 class="display-4">header</h1> </div> <div class="row"> <div class="col-lg-4 ml-n5"> <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /:col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="http.//placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <:-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="http.//placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /.col-lg-4 --> </div> <div class="row"> <div class="col-lg-4 ml-n5"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <!-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <!-- /.col-lg-4 --> </div> </div> <!-- /.row --> </div> </main>

鏈接到 Codepen

Answer 1

我沒有很好地回答你的問題，但如果你問的是背景，為什么它沒有占據整個部分，我相信會發生這種情況，因為你選擇了肖像圖像，你必須使用風景圖像

 background-image: url(https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg);

Answer 2

如果您希望背景圖像位於 class row上，則將其放入其中，而不是將其放入您的 id 元素bg-img中。 檢查下面的片段以供參考。

 /* Center align the text within the three columns below the carousel */.marketing.col-lg-4 { margin-bottom: 1.5rem; text-align: center; }.marketing h2 { font-weight: 400; }.marketing.col-lg-4 p { margin-right: .75rem; margin-left: .75rem; }.row { background-color: #E6F1FF; background-image: url('http://placekitten.com/600/800'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 20%; background-size: cover; color: #323840; height: 1148px; width: 100%; margin: 0; }.value-heading { color: #323840; text-align: center; font-size: 34px; font-family: 'Inter-SemiBold', Arial, sans-serif; font-weight: 600; line-height: 41.15px; }.value-description { font-family: 'Inter-Regular', Arial, sans-serif; color: #323840; text-align: center; font-size: 24px; line-height: 36px; }.section-heading { color: #043B7C; text-align: center; font-size: 46px; font-family: 'Inter-Medium', Arial, sans-serif; font-weight: 500; line-height: 60px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main role="main"> <div class="marketing" > <div id="bg-img"> <div class="pricing-header mx-auto text-center" > <h1 class="display-4">header</h1> </div> <div class="row"> <div class="col-lg-4 ml-n5"> <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /:col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="http.//placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <:-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="http.//placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /.col-lg-4 --> </div> <div class="row"> <div class="col-lg-4 ml-n5"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <.-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <!-- /.col-lg-4 --> <div class="col-lg-4"> <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200"> <h2 class="mt-3 value-heading">header</h2> <p class="value-description">info</p> </div> <!-- /.col-lg-4 --> </div> </div> <!-- /.row --> </div> </main>