css - 画面解像度全体で画像サイズを合わせる

Question

次のようなdivタグがあります

<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>

この div は次のような CSS に関連付けられています

#MainMenu1 
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}

小さい画面では背景画像は問題ありませんが、より広い画面では中央の位置しか占めていません。より広い画面でも画像が全画面を占めるようにしたいのですが、画像が「繰り返される」ことは望ましくありません。どうすればいいですか？

Answer 1

画像を繰り返してスペース全体をカバーするか、background-size: cover画像の元の縦横比を維持しながら領域全体をカバーするように拡大または縮小することができます。