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

我看到背景图像在较小的屏幕上很好，但在更宽的屏幕上，它只占据中心位置。我希望图像即使在更宽的屏幕上也能占据整个屏幕，我不希望图像重复＆＃34;重复＆＃34;。我该怎么做？

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

试试这个。它对我来说很完美。它应该完全适合中心的背景，并合理地将其拉伸到网站正在查看的任何屏幕尺寸。

Answer 2

您可以让图像重复意味着它覆盖整个空间，或者使用background-size: cover缩放它以覆盖整个区域，同时保持图像的原始宽高比。

在屏幕分辨率上拟合图像大小

2 个答案: