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

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

來源

2013-10-06 virhonestum

你的意思是第二圖像覆蓋的第一個？ – Dvir

不，它應該在兩側延伸，不應以任何方式重疊 – virhonestum

但是，您希望它會落在第一張圖片的後面嗎？否則你不會提到第一個圖像。 – Dvir

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

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

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

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

來源

2013-10-06 20:37:55

差不多！但它應該連接到主標題，現在部分額外圖像在標題下方。它會「不在窗口」，你再也看不到其他的東西了 – virhonestum

-1

//標記

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

// CSS

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

來源

2013-10-06 20:27:34

你必須與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

來源

2013-10-06 20:43:05 Dvir

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

回答

相關問題