☰

Bootstrap 4: CSS なしで背景画像を含める方法

tag-icon • tag-icon css
Bootstrap 4: CSS なしで背景画像を含める方法

Bootstrap は、最も一般的な Web サイト デザイン要素をカバーするために CSS クラスを定義していますが、扱いにくいカスタマイズされた CSS を追加せずに Bootstrap クラスを使用して背景画像ファイルを指定する方法がわかりません。

答え1

画像のパスを指定するには、スタイルを使用して background-image:url(''); プロパティを指定する必要があります。また、.bg-image クラスを使用して画像をレスポンシブにすることができます。
その方法は次のとおりです。
インライン CSS で background-image を追加します。.bg
-image クラスを追加して、画像を適切に拡大縮小し、レスポンシブ性を有効にします。
例:

<div class="bg-image" 
     style="background-image: url('https://i.postimg.cc/ZnHTP71s/aircraft-airplane-boat-1575833.jpg');
            height: 100vh">
</div>

vh はビューポートの高さを表します。
ここで、height:100vh は利用可能な高さの 100% を意味します。

関連情報