Question

我有一个标题（2300x328像素）和另一个图像（456x328像素）。现在我希望第二个图像向左和向右扩展此标题，标题填充整个宽度可用。它需要连接而不重叠，因为有一个模式。这是我的意思的图像：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添加div bot两侧。我在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;
}

重复图像以扩展标题以填充屏幕

3 个答案: