如何获取背景图片以便不重复并占用整个部分？

问题描述：

我的网站是在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>

我不认为这是可能扩大的背景图像，以适应指定的尺寸 – 2013-02-26 03:07:08

你应该得到更大的图像 – c0dem0nkey 2013-02-26 03:08:39

答

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

使用

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

答

简单。这可以解决您的所有需求。虽然我不知道，在IE浏览器工作正常，但在Firefox，Chrome浏览器绝对不会和Safari

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

感谢，感激不尽。 – Philip7899 2013-02-26 19:51:18

答

包括后备然后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)

如何获取背景图片以便不重复并占用整个部分？

相关推荐