重複圖像以擴展標題以填充屏幕

Question

我有一個標題（2300x328px）和另一個圖像（456x328px）。現在我想要第二張圖片將這個頭部擴展到左側和右側，頭部可以填充整個寬度。它需要連接而不重疊，因爲有一個模式。 這裏是我的意思是：http://imgur.com/0ji3Hae 圓圈是模式（爲什麼它不應該重疊）和擴展頭的圖像可以無限重複。

Answer 1

對於圖案對齊正是你需要根據頭部圖像來對準背景圖案（例如：中心，左等）然後確保圖案從正確的位置開始。

我做了一個小提琴來解釋我的意思 - http://jsfiddle.net/taneleero/g99xa/

.header { 
    background:url(http://i.imgur.com/BzVtzl4.jpg) repeat-x center; 
} 

.header img { 
    display:block; 
    margin:0px auto; 
} 

Answer 2

//標記

<div id="header" style="height: 200px;"></div> 

// CSS

#header { 
    background: url(images/preloader-w8-cycle-black.gif) repeat-x; 
} 

Answer 3

你必須與repeat-x添加格機器人兩側。 我爲你在jsFiddle上做了個例子。

HTML：

<div id="header"> 
    <div class="extend"></div> 
    <div id="logo"></div> 
    <div class="extend"></div> 
</div> 

CSS

#header { 
    display: inline-block; 
    border: 1px solid black; 
} 
#header div { 
    display: inline-block; 
} 
.extend { 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_(2011).svg/64px-Google_Chrome_icon_(2011).svg.png'); 
    height: 60px; 
    width: 100px; 
} 
#logo { 
    background-image: url('http://upload.wikimedia.org/wikipedia/he/3/3f/Microsoft_Outlook_Icon.png'); 
    width: 64px; 
    height: 64px; 
} 

jsFiddle