CSSデスクトップ私は、次のウェブサイト持っている背景画像表示

Question

を保つ：

www.thewhozoo.com

以上1240pxの幅を画面上から見た場合、それは側で画像側を表示します。 1240ピクセル未満の画面（携帯電話など）の場合、画像はお互いの下に表示されます。これは、以下を使用して実現されます。

@media only screen and (max-width: 1240px) { 

これはすべて正常に動作します。

私の問題は、しかし、背景画像にある：ブラウザは十分な広さ（ここでは例えば930px）である場合には、それが表示さ

.top-container { 
    float: left; 
    width: 100%; 
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1)),url('../images/background1.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

：

しかし、狭いブラウザで（ここでは480ピクセルなど）またはモバイルデバイスの場合、次のように表示されます。

ご覧のとおり、画像では、2番目の画面でバックグラウンドの作品「WORK」が途切れることがあります。

質問

はそれが単語「WORK」が常に表示されるように、CSSで、最小幅を設定することが可能であり、どんなにブラウザのサイズ？

これにより、ページを遠くから見る（あたかもズームアウトした）ような小さなブラウザになります。

ありがとうございます。

Answer 1

background-size: coverの設定では、要素全体が常に背景画像で塗りつぶされます。あなたのケースでは、モバイルバージョンはイメージの完全な高さを表示し、それを左右にセンタリングします。それを小さく表示すると（ワード全体を見るために必要です）、高さも縮まり、イメージはもはやウィンドウをいっぱいにしません。

代わりにbackground-size: containを試すと、画像全体が常に表示されますが、向きに応じて上下左右に空白が残ります。しかし、背景色と組み合わせて、これはあなたが一緒に暮らすことができるものかもしれません。

Answer 2

はbackground-size: 100% 100%を試してみてください、またはbackground-size: 100%

・ホープ、このことができます！

Answer 3

ブラウザが最小幅にリサイズされると、バックグラウンドイメージを2つコピーすることができます。バックグラウンドイメージを大きなバージョンから小さいバージョンにスワップするためにjavascript（jquery）を使用できます。

それとも、のような背景のスタイルができます：私はよく分からないのに...あなたは何を試してみましたが、 `分 - width`が存在する背景画像のdiv要素にCSSを考える

background-image:url('../images/bg.png'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center;