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

#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;
}

试试这个。它非常适合我。它应该完美地适合中心的背景，并合理地将其拉伸(stretch)到正在查看网站的任何屏幕尺寸。