整個背景圖像被在屏幕上不配合

Question

（來源：http://imgur.com/5pKaiea）

喂予basicly有兩個以上一個「頭」的文件和一個「頁腳」兩者相同的尺寸有點剛剛翻轉。

問題是寬度不適合頁面，除background-image: cover以外的任何方式？

該文件基本上是1280像素寬，約114像素高。如果你正在尋找有響應結帳上的jsfiddle http://jsfiddle.net/bKZ8N/

Answer 1

在CSS中，你可以使用屬性background-size調整圖像大小，以適應：

div #header { 
    background-image:url(../img/webclient_header.png); 
    background-size:800px 114px; /* Choose your size here W x H */ 
    height: 114px; 
    width: initial; 
    margin: 0; /* If you want no margin */ 
    padding: 0; /*if your want to padding */ 
} 

UPDATE圖片在你的網站上，background-image不是最好的選擇。您需要使用可能的CSS媒體查詢來提供不同的背景圖片大小，或者使用與舊版瀏覽器不兼容的background-size屬性。

我建議做這樣的事情：

<header> 
    <img src="you-image.jpg" width="100%" height="auto" /> 
</header> 

Answer 2

代碼更新：

div #header { 
    background-image:url(../img/webclient_header.png); 

    height: 114px; 
    width: initial; 
    margin: 0; /* If you want no margin */ 
    padding: 0; /*if your want to padding */ 
} 

Answer 3

這是一個很大的一個頁眉/頁腳圖像回事......我會去了解一下可能破壞它。你可以使中心部分設置基本上包含菜單的整個網站的寬度。之後，您將剪切1px寬度（x值）px高度，並將其用作標題div後面的重複背景。其他元素可以策略性地計劃添加到網站的其他部分以更好地反映圖像。

不是一個好的答案，但這是我在這種情況下會做的。否則，你會看到被拉伸的圖像，並可能失去一些焦點。

編輯： 要回答你的問題的意見 類...

所以，你將有至少3圖像header_middle_piece.jpg（圖像的該指向「向下」的中間），footer_middle_piece.jpg（旋轉）和repeating_pattern.jpg

從那裏你會有你的水平佈局。

<div id="header"> 
    <div id="container"> 
     <div id="content"></div> 
    </div> 
</div> 

使用相同類型的頁腳佈局。

#header{ 
    width: 100%; 
    background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent; 
    height: 20px; // Make this the height of the pattern you are using. 
} 
#container{ 
    background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent; 
    height: 40px; // height of the middle piece. 
    width: 200px; // width of middle piece 
    margin: 0 auto; // center the container. 
} 

這些是你在整體工作中唯一需要的樣式。在病房後，如果你仍然這樣做，你需要針對這些條紋的重複背景定位背景，併爲其他形狀創建一個div。如果你沒有製作這張圖片，你將很難分辨它。但它是可行的。