Html 围绕中心标题重复背景图像

我有一个固定高度和宽度的页眉，在我的页面中心。从标题图像的每个边缘，我已经拍摄了小的1像素图像，我希望在该宽度的重熔空间重复这些图像

无论如何，我的问题是，我不能让小图像在标题周围重复。我开始尝试重复标题右侧的背景图像，但是背景跳到下一行并在那里重复。当我添加左标题bg图像时，一个在整行上重复，右标题图像在它下面

编辑- 这里是JSFIDLE。希望它能帮助你理解我的问题。

下面是html：

<div id="HeaderContainer">
    <div id="HeaderLeft"></div>
    <div id="Header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>

            </ul>
        </div>
    </div>
    <div id="HeaderRight"></div>
</div>

---

在任何浏览器中都不起作用。我错过了什么

左右两侧不需要额外的div。您只需将背景平铺应用于HeaderContainer，重叠的标题将用其背景覆盖它=

对于左右不同的图像，只需从一侧重叠背景-比如说左侧，再加上另一个div

---

这是一个。

您不需要为左右两侧添加额外的div。您只需将背景平铺应用于HeaderContainer，重叠的标题将用其背景覆盖它=

对于左右不同的图像，只需从一侧重叠背景-比如说左侧，再加上另一个div

---

下面是一个示例。

您是否尝试将图像URL用引号括起来？喜欢背景图片：url'images/headerLeft.png'

您是否尝试将图像URL用引号括起来？喜欢背景图片：url'images/headerLeft.png'

我从您的问题中了解到的是，您希望在标题角上实现与边框图像类似的背景图像。 如果是,

您只需执行以下步骤即可：

take元素：父元素和子元素 在父元素中重复背景图像，并根据要显示的图像指定填充。 为内部元素指定不同的背景色或图像。 这样，父元素的背景图像作为标题的边框图像

干杯，

---

Vikram

我从您的问题中了解到的是，您希望在标题角上实现背景图像，仅与边框图像类似。 如果是,

您只需执行以下步骤即可：

take元素：父元素和子元素 在父元素中重复背景图像，并根据要显示的图像指定填充。 为内部元素指定不同的背景色或图像。 这样，父元素的背景图像作为标题的边框图像

干杯，

---

维克拉姆

出于好奇，我一直在研究你的问题。 这是你的电话号码

HTML：

<div id="HeaderContainer">
    <div id="HeaderLeft">&nbsp;</div>
    <div id="HeaderRight">&nbsp;</div>
    <div id="header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>
            </ul>
        </div>
    </div>   
</div>

---

我参考了@Martin Turjak code中的一些观点。

出于好奇，我一直在研究您的问题。 这是你的电话号码

HTML：

<div id="HeaderContainer">
    <div id="HeaderLeft">&nbsp;</div>
    <div id="HeaderRight">&nbsp;</div>
    <div id="header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>
            </ul>
        </div>
    </div>   
</div>

---

我参考了@Martin Turjak代码中的一些要点。

请创建一个JSFIDLE文件。那就很容易帮助你了。好吧，我会继续说：好的，慢慢来。如果您在创建JSFIDLE时遇到任何问题，请将其上传到任何服务器，并发送链接。请创建一个JSFIDLE文件。那就很容易帮助你了。好吧，我会继续说：好的，慢慢来。如果您在创建JSFIDLE时遇到任何问题，请将其上传到任何服务器，并发送link.oh。。。我明白了，从问题的激烈程度上看，这并不明显。将立即更新答案=哇，很好，看起来就像我需要的一样！：如果我把它用于我的工作，请告诉我：为了更好地说明，我在这里用你的图片更新了我的。希望这能帮助你并把你推向正确的方向。祝你好运在ie7、8、9和10中工作。太棒了，塔克斯！我爱你！哦我明白了，从问题的激烈程度上看，这并不明显。将立即更新答案=哇，很好，看起来就像我需要的一样！：如果我把它用于我的工作，请告诉我：为了更好地说明，我在这里用你的图片更新了我的。希望这能帮助你并把你推向正确的方向。祝你好运在ie7、8、9和10中工作。太棒了，塔克斯！我爱你！

#HeaderContainer {width: 100%; position:relative;}
#HeaderLeft {background: url("images/headerLeft.png") repeat-x top left; height: 210px; position:absolute; top:0%; left:0%; width:50%;}
#header {background: url("images/header_image.png") no-repeat 0 0 #707173; height: 210px; width: 990px; margin:0 auto; position:relative;}
#HeaderRight {background: url("images/headerRight.png") repeat-x top right; height: 210px; position:absolute; top:0%; right:0%; width:50%;}