Question

所以这就是事情。我有页脚div。我想为它创建一个很好的背景。中心会有一个图像。背景将以X bg模式向左延伸至无穷大使用Y bg模式，背景将延伸到无穷远像这样; XXXXXXXXXXXXXXimageYYYYYYYYYYYYY

以下代码没有这样做。我做错了什么？

.subcontent {
    min-height:50px;
    width:100%;
    background:#00CC66;
}
.leftcontent {
    float:left;
    min-height:50px;
    width:100%;
    background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
    float:right;
    min-height:50px;
    width:100%;
    background:url(images/bg_rpattern.jpg) repeat-x;
}

  <div class="subcontent">
    <div class="leftcontent">
    </div>
    <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
    <div class="rightcontent">
    </div>
  </div>

Answer 1

如果您不知道徽标的确切尺寸且布局流畅，则可能会很复杂。

宽度：100％将div拉伸到100％并使下一个浮动div转到下一行。

为什么不使用一个大的背景图像来表示1x6000px并对其进行y重复：无论如何，你将用覆盖的图像覆盖它的中心，所以不管你是否有任何东西都不重要。

试试这个：

<div class="subcontent" style='width:100%; background: url("images/bg_pattern.jpg") repeat-y scroll center top #00CC66; border: 0 none; min-height:50px; text-align:center;'>
  <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
</div>

其中bgpattern.jpg是一个loooong薄图像...或者如果你需要它是一些漂亮的背景（不只是拉伸一行颜色）然后使它成为3000x6000左右的巨大图像并将其用作背景 - 它仍然可以正常工作 - 以徽标为中心，两侧将延伸，直到达到6000px分辨率。

将背景扩展到无限问题

1 个答案: