2017-01-10 10 views
0

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

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

.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カラーを得ることができますが、大規模ではありませんが、規模に応じて使用するといいと思っていました。

答えて

1

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

+0

@Mcokerこのソリューションは非常に優れたソリューションです。私は今夜​​私を助けるあなたの時間を感謝します。 Thx –

+0

@ DA-G-GURUの言葉!問題ありません。 –

0

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

+0

@ MParksjrあなたの記事をありがとう、この方法は私も(私はいくつかのメディアのCSSの経験を持っているので)私はあなたの問題のための最善の解決策がMcokerから上記で解決された感じを感じた。私はあなたにこの問題を非常に手助けしようとしてくれてありがとう。 –

関連する問題