如何獲取背景圖片以便不重複並佔用整個部分？

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

我不認爲這是可能擴大的背景圖像，以適應指定的尺寸 – 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

來源

2013-02-26 03:11:44 basarat

簡單。這可以解決您的所有需求。雖然我不知道，在IE瀏覽器工作正常，但在Firefox，Chrome瀏覽器絕對不會和Safari

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

來源

2013-02-26 05:13:15

感謝，感激不盡。 – 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)

來源

2013-08-08 04:10:00 faulkmore

如何獲取背景圖片以便不重複並佔用整個部分？

回答

相關問題