[概要]ページ全体に表示しようとしている背景画像が正しく表示されません。コンテナの最初の<div>で機能しますが、2番目の<div>では、テーブルの左側と右側に大きな白いバーがあります。
私はBootstrapとHTML全般に非常に慣れていないので、本当に助けを求めたくありませんでしたが、私はこれに約1週間苦労していて、役に立たなかったのです。StackOverflowやその他のウェブサイトで提案されているさまざまなソリューションを試しました。私は正直にたくさんのことを試したので、試したすべてを思い出せません。頭のてっぺんから、テーブルを独自のコンテナに入れたり、現在持っているコンテナに行を追加したり、複数の場所に背景画像を追加したりしてみました。私はここで愚かなことをしていると確信しています、そして私は前もって謝罪します。あなたが提供できるどんな助けにも感謝します。
<body>
<header>
<!-- Start of Top Navbar -->
<!-- End of Top Navbar -->
<!-- Start of Background Image -->
<div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
<!-- Start of Unique Page Content -->
<div class="container h-100">
<div class="d-flex align-items-center justify-content-center h-100 align-self-center">
<div class="d-flex flex-column text-center">
<h1><strong>About</strong></h1>
<h4>
Content.
</h4>
</div>
</div>
<div class="d-flex flex-column text-center">
<div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="table-responsive">
<table class="table table-sm" id="forest_sunset">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End of Unique Page Content -->
</div>
<!-- End of Background Image -->
</header>
<footer>
<!-- Start of Bottom Navbar -->
<!-- End of Bottom Navbar -->
</footer>
<!-- JQuery -->
<!-- Popper.js -->
<!-- Bootstrap JavaScript -->
</body>
これは、ページがどのように見えるかの画像です。横に白いバーを残さずに背景が画面の全幅を占めることを除いて、そのように見せたいです。また、レスポンシブにしたいので、そもそもBootstrapを学ぼうとしたのです。
このcssはどの画面サイズでも機能し、自動的にサイズ変更されます。だからそれは敏感です。それはあなたの問題に対処していますか？
body {
background: url("https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加