我正在使用 wordpress 软件为一个政党(不是客户，我自己的目的)开发网站。我正在修改 theme junkie 名为 fresh life 的主题。实际上我不是前端开发人员，但我正在尽最大努力更改与政党旗帜相匹配的主题样式。
首先，我正在修改样式的网站是www.ysrcong.com .政党旗帜 URL 是 http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg .
我试图将网页左侧的背景色设置为 2266BB ，网页右侧设置为 0FBD60 ，页面中间部分设置为白色。网站宽度的中间部分为 950px。没有特定的左右宽度。
我用谷歌搜索并找到了一个解决方案。我已经实现的解决方案是，我设计了一个图像，颜色为 2266BB 和 0FBD60，宽度和高度相同，左侧颜色为 2266BB，右侧为其他颜色。
我已将该图像设置为所有网页的背景。在大多数浏览器中似乎工作正常，但有一些小问题。我面临的问题是
1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it was left some height and that part was filled with background image
请给我建议如何解决这两个问题，以及是否有任何其他有效的解决方案来实现这一目标。
下面是我写的代码。
html code
-------------------------
<body>
<div id="bg"><img src="bg.png" width="100%" height="100%" alt="">
</div>
<div id="#wrapper">
webpage content goes here.
</div>
</body>
styles i applied.
---------------------------------
body {
height:100%; margin:0; padding:0;
}
html {
height:100%;
}
#bg {
position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
background: #fff;
margin: 0 auto 0px auto;
padding: 10px 15px 0 15px;
width: 950px;
position:relative;
}
最佳答案
- 删除您为背景创建的#bg div
- 创建一张 1 像素高 x 3000 + 像素宽的图片。将图像分成两半，左右两边是您想要的颜色
- 将css中的body标签设置为
background: url(path/to/your/image) repeat-y center top; - 庆祝，你完成了
关于css - 背景图像拉伸(stretch)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9521268/