バックグラウンドで最小幅を設定する方法

Question

私は1000px X 600pxの画像を持っています。私はdivのための反応的な背景としてそれを使用したいが、ブラウザウィンドウがどれくらい小さいかにかかわらず、1000pxの最小幅を設定したい。

minを定義する簡単な方法はないようで、これはイライラしています。幅。

background-size：coverを何らかの理由で使用すると、画像は1000pxよりもはるかに大きくなります。メディアクエリがオプションであれば

Answer 1

を助けてください、あなたはセットアップブラウザのメディアクエリーは、より小さい1000pxワイドビューポートをすることができます。

あなたのHTMLビューポートが設定されていると仮定：

<meta name="viewport" content="width=device-width"> 

そして、あなたのdivが 'BG' という名前が付けられ：あなたのCSSで

<div class="bg"></div> 

：

.bg { 
    width: auto; /* Scale the div to the parent width */ 
    height: 900px; /* The div needs some height to be visible */ 
    background-image: url(bg.png); /* This is your background image */ 
    background-size: 100%; /* Always size the image to the width of the div */ 
    background-position: top; /* Position the image to the top center of the div */ 
} 

/* For any viewports less than 1000px wide */ 
@media (max-width: 1000px) { 

    .bg { 
     background-size: 1000px 600px; /* Force the image to its minimum width */ 
    } 

} 

Answer 2

私は同じ問題を抱えていました。次のコードは私のために働いた。同じ要素に最小幅を追加するだけでした。ここで私はちょうどhtml要素を使用し、私はbody要素に

 /* CSS Style Sheet */ 

html { background-image:url(example.JPG); 
        background-size:cover; 
        min-width:1000px;} 

を使用する方が、従来のだろうことを前提としています私はこれが役に立てば幸い、

Answer 3

background-sizeにのみスケールのためのオプションがあります画像が実際の高さ/幅に達するまで画像を拡大します。この方法では、最小幅などを設定する必要はありません。あなたのCSSで

：

body { 
    background-size: cover; 
} 

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values