ブートストラップで画像に反応する方法

Question

私はこのサイトで以下の作業を行っています。ナビゲーションメニューの下に表示されるバナーを取得しようとしています。サイズの肖像画。

この領域のコードはここにあります。

.tp-page-header { 
    background-image: url("../images/page-header.jpg"); 
    background-repeat: no-repeat; 
    padding-bottom: 20px; 
    padding-top: 20px;} 

ウェブサイトのリンクはこちらです。 http://dagrafixdesigns.com/2019/industrial-darker/about-us.html

このバナーは、スライダーを持つようにホームページ以外の各サブメニューリンクの下にあります。私はそれが反応するようにするために何かがCSSコードに行うことができるか、またはトップバナーのようなものがHTMLでなければならないかどうかはわかりません。

私はHTML形式で学んだことがあるが、運がなかった。

これはうまくいかない場合、私はこの背景にイメージカラーまたはCSSカラーを得ることができますが、大規模ではありませんが、規模に応じて使用するといいと思っていました。

は

Answer 1

がbackground-size: cover;とbackground-position: 80% 0;の組み合わせを試してみてください、ありがとうございました。 background-sizeは、サイズを変更するときにコンテナのサイズに合わせて画像のサイズを変更し、background-positionはX軸上で少し右に移動し、サッカーのプレイヤーの頭を見ることができます。

Answer 2

ex 480の画像のサイズを小さくすると、iPhoneのピクセルサイズになるので、それを40にして中央に配置します。画像を縮小して表示するには、@media（最大幅480ピクセル）を使用し、ブロック内で背景画像を新しい画像に設定します。