Css 调整标题图像大小以自动适应浏览器

所以这里我有一个标题图像如下

我计划将标题图像拉伸到100%以获得显示器分辨率，实现这一点的最佳实践和方法是什么？我尝试过这样做：

.LippoHeader
{
background-image: url('../images/body/headerpng_BG.png');
background-repeat: repeat-x;
width: 100%;
height: 170px;
}
.shadowone
{
width: 100%;
position: absolute;
left: -1px;
top: 172px;
display: inline-block;
}
.shadowtwo
{
width: 100%;
position: absolute;
left: -1px;
top: 173px;
display: inline-block;
}
.shadowthree
{
width: 100%;
position: absolute;
left: -1px;
top: 176px;
display: inline-block;
}

它仍然无法拉伸到100%适合显示器（仅在图像分辨率允许的情况下拉伸），除非我添加：

位置：绝对位置

有什么办法可以这样做吗？如果可能的话，我不想补充，我被告知不要将位置设置为绝对值，因为这是一种不好的做法

以下是标题的屏幕截图：

我还使用了母版页，所以没有body标记，只有div标记，我使用了.ascx作为面板标题，我的代码是

<div class="LippoHeader">
  <div>
    <img src="images/body/shadow.png" class="shadowone" />
    <img src="images/body/shadow.png" class="shadowtwo" />
    <img src="images/body/shadow.png" class="shadowthree" />
  </div>
</div>

---

据我所知，您想要拉伸标题，而不是图像本身；图像正在水平重复

---

我将

LippoHeader

视为一个div，它在这方面没有问题。但是，它不占显示器宽度的100%，而是占其父显示器宽度的100%（在本例中，

body

）。这是你的目标吗？

据我所知，你想拉伸标题，而不是图像本身；图像正在水平重复

---

我将

LippoHeader

视为一个div，它在这方面没有问题。但是，它不占显示器宽度的100%，而是占其父显示器宽度的100%（在本例中，

body

）。这是你的目标吗？

因为你想重复一个图像，并且让一个

div

占据整个浏览器窗口的宽度，而不是一个实际的单个图像，所以你需要确保

html

或

body

标记上没有空白。查看提供的JSFIDLE，您将希望删除边距

html，
身体{
保证金：0；
}

由于您希望重复一个图像，并使

div占据浏览器窗口的整个宽度，而不是实际的单个图像，因此您需要确保
html
或
body
标记上没有空白。查看提供的JSFIDLE，您将希望删除边距

html，
身体{
保证金：0；
}
是的，我的意思是，但在我的情况下，它仍然没有填充100%的页面宽度，请查看我的编辑是的，我的意思是，但在我的情况下，它仍然没有填充100%的页面宽度，请查看我的编辑你没有使用
body
标记吗？body标记中是母版页，我使用.ascx作为页眉和页脚啊，从新代码中我看到你想在背景图像上叠加三个图像？背景图像占据了整个宽度？是的，这正是我想说的，哈哈哈。有可能吗？或者我应该想出另一种方法？这3个重叠图像应该如何放置？您没有使用
body
标记？中的body标记是母版页，我使用.ascx作为页眉和页脚啊，因此从新代码中我看到您希望在背景图像上覆盖三个图像？背景图像占据了整个宽度？是的，这正是我想说的，哈哈哈。有可能吗？或者我应该想出另一种方法？这3张叠加图像应该如何放置？