0

我的网站位于 avidest.com/test。我正在尝试使背景图像从页面顶部向下移动到“我们的在线服务”部分。由于某种原因，它提前结束了，并且有一段页面可以看到黑体背景。我不想显示这个黑色部分。这是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>
4

3 回答 3

2

CSS3 添加了 background-size 属性：http ://www.w3schools.com/cssref/css3_pr_background-size.asp ，您可以在 IE9 及更高版本中使用它http://caniuse.com/#feat=background-img-opts

否则，您的选择是使用更大的背景图像或在内容后面使用带有图像的 div

于 2013-02-26T03:11:44.983 回答
0

simple. That fixes all your needs. Although I'm not sure if that works fine in IE but it definitely does in Firefox, Chrome and Safari

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

于 2013-02-26T05:13:15.103 回答
0

包括 fallback 然后 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)
于 2013-08-08T04:10:00.800 回答