web-dev-qa-db-ja.com

Responsive Bootstrap Jumbotron Background Image

bootstrap jumbotronを使用しており、背景画像を含めています。画面のサイズを変更すると、画像がタイル表示され、繰り返し表示されますが、画像のサイズを適切に変更します。

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

画像をレスポンシブにする方法は？ サイトはこちらです 。あなたのアイデアをありがとう！

csscss3twitter-bootstrapresponsive-design
34
Nick B

最も簡単な方法は、背景サイズを「カバー」に設定することです

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

スティーブ

54
Steve

これは私がやったことです。
最初に、ジャンボトロンクラスをオーバーライドし、次の操作を行います。

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

これで、レスポンシブバックグラウンドを備えたジャンボトロンができました。ただし、Irvin Zhanが既に答えたように、背景の高さはまだ正しく表示されません。

できることの1つは、次のようないくつかのスペースでdivを埋めることです。

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

または、よりエレガントに、コンテナの高さを設定できます。 Bootstrapコンテナクラスをオーバーライドしないように、別のクラスを追加することもできます。

<div class="jumbotron">
    <div class="container Push-spaces">
        About
    </div>
</div>

.Push-spaces
{
    height: 100px;
}
7
Fadils

これは私にとって完璧に機能することがわかりました：

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

画面のサイズを変更すると、常にウィンドウの100％を占有します。

5
Justin

TLDR：background-size: 100% 100%;を使用します。

background-size: cover;は、画像の一部を切り取って、結果が良くない場合があります。

background-size: 100% 100%;を使用すると、heightとwidthの両方の親要素の100%を強制的に画像に取り込むことができます。

詳細については、 W3Schools を参照してください。

動作するjumbotron背景画像は次のとおりです。

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
3
maxshuty

これは私がする方法です：

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>
3
JustRocca

残念ながら、 divの高さはbackground-sizeに応答する にする方法はありません。私が使用した最も簡単な解決策は、その背景画像を含むジャンボトロン内にimgタグを追加することです。

2
Irvin Zhan

これを試すことができます：

HTMLファイルの先頭にあるスタイルタグにコードを配置するだけです

<style>
        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

または以下に示すように別のcssファイルに入れます

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

center centerを使用して、画像を水平および垂直に中央揃えします。 coverを使用して画像をジャンボトロン空間に塗りつぶし、最後にno-repeatを使用して画像が繰り返されないようにします。

1
Joan

以下のコードはすべての画面で機能します：

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

Coverプロパティは、コンテナ全体を覆うように背景画像のサイズを変更します。画像を引き伸ばしたり、エッジの1つを少し切り取ったりする必要がある場合でも同様です。

1
Dhanesh Agrawal