跨屏幕分辨率调整图像大小

Question

I have a div tag like

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

This div is associated with a css like

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

I see that the background image is fine on a smaller screen but on a wider screen, it occupies only the center position. I want the image to occupy the full screen even on wider screens and I do not want the image to "repeat". How would I do this?

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

Try this. It works perfectly for me. It should fit the background perfectly in the center and reasonably stretch it to whatever screen size the website is being viewed on.

Answer 2

您可以让图像重复表示其覆盖整个空间，也可以使用background-size: cover进行缩放，以覆盖整个区域，同时保持图像的原始纵横比。