CSS 不拉伸(stretch)背景 100%

Question

出于某种原因，我无法将左栏中的背景拉伸(stretch)到 100% 高度。

这是我的 CSS 中的两个类:

#page {
    min-height: 100%;
}

#content {
    margin: 0px auto;
    width: 100%;
    min-height:100%;
    overflow:auto;
    padding-bottom: 65px;           
}

#leftmain {
    background:url(images/leftmain.gif);
    background-size:15% 100%;
    border:1px solid #c3c2c2;
    width:15%;
    height:100% !important;
    float:left;
}

#leftmain .cssmenu {
    width:100%;
    min-height:100%;
}

#leftmain .cssmenu ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#leftmain .cssmenu ul {
    width:100%;
    position: relative;
    z-index: 597;
}

#leftmain .cssmenu ul li {
    min-height: 1px;
    width:100%;
    line-height: 1em;
    vertical-align: middle; 
}

html:

<div id="page">
    <div id="content>    
        <div id="leftmain>
            <div class="cssmenu">
            </div>
        </div>
        <div id="rightmain">    
        </div>    
    </div>    
</div>

如果我将 .cssmenu 上的 min-height 更改为固定的 height，假设 500px它显示了背景。

有什么建议吗？

Answer 1

试试这个

#leftmain { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

引用:http://css-tricks.com/perfect-full-page-background-image/