Место размер изображения через разрешение экрана

Question

У меня есть DIV тег, как

<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></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, который будет масштабировать его, чтобы покрыть всю область, сохраняя при этом исходное соотношение сторон изображения.

Answer 2

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

Попробуйте это. Он отлично работает для меня. Он должен идеально соответствовать фону в центре и достаточно растянуть его до любого размера экрана, на котором просматривается веб-сайт.