html - 重复图像以将标题扩展到整个屏幕

Question

我有一个标题 (2300x328px) 和另一个图像 (456x328px)。现在我想要第二张图片将这个标题向左和向右扩展，标题填满可用的整个宽度。它需要连接而不重叠，因为有一个模式。 这是我的意思的图像:http://imgur.com/0ji3Hae 圆圈是图案(为什么它不应该重叠)并且扩展标题的图像可以无限重复。

Answer 1

为了使图案准确对齐，您需要根据标题图像(例如居中、左侧等)对齐背景图案，然后确保图案从正确的位置开始。

我做了一个 fiddle 来解释我的意思 - http://jsfiddle.net/taneleero/g99xa/

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

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