Question

我的网站在avidest.com/test上。我正在尝试将背景图像从页面顶部转移到＆＃34;我们的在线服务＆＃34;部分。出于某种原因，它提前结束，并且有一段页面可以看到黑色的身体背景。我不希望这个黑色部分显示出来。这是css：

.header {
 /*background: #f0f7f7 url(images/header_bg.gif) top repeat-x;*/
    background: transparent;
    padding: 0;
    margin: 0 auto;
    height: 70px;
}

.block_header {
    margin: 0 auto;
    width: 980px;
    padding: 0;
    border: none;
}

.logo {
    float: left;
    padding: 0;
    margin: 0;
    width: 242px;
}

.uppercontain {
    background: url(images/slider_bg.gif) no-repeat;
    background-size: 100%;
    min-width: 1050px;
    min-height: 700px;
}

.slider {
/* background:url(images/slider_bg.gif) no-repeat; background-size: 100%; min-width: 1050px; */
    background: transparent;
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.slider .gallery {
    margin: 0 auto;
    width: 1050px;
    height: 383px;
    padding: 0;
} /*width was 880px*/
.slider .formbox {
    float: right;
}

以下是它在页面上的显示方式：

<body bgcolor="#000000">
    <div class="main">
         <div class="uppercontain">
            <div class="header">
                 <div class="block_header">
                      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="242" height="94" border="0" alt="logo" /></a></div>
                 </div>
            </div>
            <div class="slider">
                 <div class="gallery">
                     <div class="form box"> Form is here </div>
                 </div>
            </div>
         </div>
    Rest of content
    </div>

Answer 1

CSS3添加了背景大小属性：http://www.w3schools.com/cssref/css3_pr_background-size.asp，您可以将其用于IE9及以上http://caniuse.com/#feat=background-img-opts

否则您的选择是使用更大的背景图片或使用内容背后隐藏着图像的div

Answer 2

简单。这可以解决您的所有需求。虽然我不确定它在IE中是否可以正常工作但在Firefox，Chrome和Safari中确实可行。

background: url('image_Url_here') no-repeat scroll center top/cover transparent;

Answer 3

包括后备，然后css3向后兼容不支持css3后台大小语法的浏览器。

background: url('image_Url_here') no-repeat scroll center center transparent;
background: url('image_Url_here') no-repeat scroll center top/cover transparent;

经过测试

firefox v12.0 (stuck on this version cuz mozilla dropped support for WinXP SP1)
Chrome v25.0(.1364 Ubuntu 12.04)

如何让背景图像不重复并占据整个部分？

3 个答案: