html - 重复图像以扩展标题以填满屏幕

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

您必须使用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

Answer 3

// 标记

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

// CSS

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