全寬背景圖片調整大小問題

我正在修復我的第二個全寬圖像（在頁面中間的那個），以便在水平方向上與上面的標題圖像中的圖像一致。我注意到圖像右側有一個間隙，如下圖所示。這是因爲我的圖像不是1600px寬？如果需要的話，我可以編輯它，以便它是1600px。如果問題是別人可以幫助我。謝謝。全寬背景圖片調整大小問題

http://www.jobspark.ca

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg'); 
border-bottom: solid 1px #ddd; 
border-top: solid 1px #ddd; 
margin-left: -1600px; 
margin-right: -1600px; 
padding-top:20px; 
padding-bottom:330px; 
overflow: hidden; 
background-position: center; 
background-repeat: no-repeat; 
background-size: auto; 
} 


<div class="fullWidthSectionBG"> 
<div class="fullWidthSection"> 
<div class="myLeftColumn">   
<p> 
</p> 
</div> 
<div class="myRightColumn"> 
<h2>Used By Thousands Of Canadians</h2> 
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p> 
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p> 
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div> 
</div> 
</div>

來源

2013-05-22 Chris S

向我們展示了HTML。 – Raptor

確定已更新幷包含html –

當我使用此css時，它不適用於我的移動設備，因爲它不涵蓋整個部分。任何想法如何解決CSS –

-1

這些天，你可以添加到您的CSS樣式：

background-size: cover;

那麼你不必擔心圖像的大小太多。它在舊版瀏覽器中不起作用，但這些日子是次要的。

這可能不是你以後的樣子，但在這種情況下，嘗試調整圖像的大小（在這種情況下，可能會使它變小）。還有其他背景大小的選項，值得一試。

來源

2013-05-22 03:56:21

好的謝謝。我仍然應該將圖片的大小調整爲1600px的寬度嗎？ –

如果你願意，但這不是一個大問題。儘管如此，用戶可以將瀏覽器窗口打開得更寬一些，所以你最終只會追逐尾巴。 –

請勿使用此CSS。任何超過IE9的瀏覽器都將失敗，超過50％的人仍在使用IE <9。IE9僅佔總市場份額的** 18.17％**。絕對不是一件小事。參考：https：//developer.mozilla.org/en-US/docs/Web/CSS/background-size和http://www.netmarketshare.com/ – Raptor

全寬背景圖片調整大小問題

回答

相關問題