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

Question

所以这里我有一个如下图所示的标题图片

我计划将标题图像拉伸至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％适合显示器（它只能伸展，因为图像分辨率本身允许），除非我添加：

  

位置：绝对;

无论如何要做到这一点？如果可能的话我不想补充一点，我被告知不要把这个位置设置为绝对，因为这是一个不好的做法

这是标题的屏幕截图：

我也使用了母版页，所以没有正文标签，只有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>

Answer 1

根据我的理解，你想要拉伸标题，而不是图像本身;图像正在水平重复。

我将LippoHeader视为div，并且在此jsFiddle中没有任何问题。但是，它不占显示器宽度的100％，而是占其父宽度的100％（在此示例中为body）。这是你的目标吗？

Answer 2

由于您想要重复一个图像并且div占据浏览器窗口的整个宽度而不是实际的单个图像，您需要确保html上没有边距或body标签。查看提供的jsFiddle，您将需要删除边距。

html,
body {
     margin: 0;
}