Question

我正在使用wordpress软件为一个政党（不是客户，我自己的目的）开发网站。我正在修改主题迷的新鲜生活主题。实际上我不是前端开发者，但我正在尽最大努力改变与政党旗帜相匹配的主题风格。

首先，我正在修改样式的网站是www.ysrcong.com。政党旗帜网址为http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg。

我试图将网页左侧部分的背景颜色设置为2266BB，网页的右侧部分为0FBD60，页面的中间部分为白色。网站宽度的中间部分为950px。左右没有特定的宽度。

我用Google搜索并找到了一个解决方案。我已经实现的解决方案是，我设计了一个图像，其颜色为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; 
}

Answer 1

删除您为背景创建的#bg div
创建1px高，3000 + px宽的图像。将图像分成两半，右侧和左侧是您想要的颜色
将css中的body标记设置为background: url(path/to/your/image) repeat-y center top;
庆祝，你已经完成了

Answer 2

我倾向于做这样的事情。

HTML

<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>

使用CSS

html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}

此处链接：http://jsfiddle.net/folktrash/EQE6K/

Answer 3

为了灵活性，我个人会在身体上使用这样的css渐变：

background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left,  #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right,  #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */

然后，您可以为旧浏览器设置“背景图像”后备。

背景图像拉伸问题

3 个答案: