背景图片拉伸问题答案

【问题标题】：background image stretching issues背景图片拉伸问题
【发布时间】：2014-01-30 23:31:08
【问题描述】：

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

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

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

我用谷歌搜索并找到了一种解决方案。我实施的解决方案是，我设计了一个图像，颜色为 2266BB 和 0FBD60，宽度和高度相同，颜色为 2266BB，左侧为 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; 
}

【问题讨论】：

标签： css image background-image stretching

【解决方案1】：

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

【讨论】：

我是设计方面的新手。请解释这一点。创建一个 1px 高 x 3000 + px 宽的图像。 3000+ px 宽是什么意思。我正在用 ms 画图创建图像。
创建一个 2 色 .gif 图像，高度为 1 像素，宽度为 3000 像素或更大。使用上面给出的 css 将其设置为 body 标签的背景。
它工作得很好。谢谢老板。我无法解决第二个问题。请建议解决这个问题。
您是否要让正文部分（白色）达到屏幕高度的 100%？如果是这样，您有两个选择。最简单的方法是修改您创建的 3000 像素图像，并在中心添加一个 950 像素的白色部分。您还可以通过删除包装器底部边距和其下方额外清晰的 div 来修改当前布局的 CSS。

【解决方案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/

【讨论】：

【解决方案3】：

为了灵活性，我个人会在 body 上使用像这样的 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 */

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

【讨论】：