背景图片拉伸问题

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

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

我想把2266BB网页的左侧部分的背景颜色，与0FBD60和网页的中间部分与白色color.middle部分的网站宽度是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; 
}

来源

2012-03-01 MAHESH

删除为背景
创建由3000 +像素宽的图像1px的高创造了#bg股利。分割图像中一半的左侧和右侧是要
在CSS身体标记设置为background: url(path/to/your/image) repeat-y center top;
庆祝，你完成

来源

2012-03-01 17:55:58 ckaufman

我是设计方面的新手。请解释这一点。创建一个图像1px高3000 + px宽。什么意思是3000+像素宽。我在ms paint中创建图像。 – MAHESH 2012-03-01 18:06:35

创建一个高度为1px，宽度为3000px或更大的2色.gif图像。将其设置为上面给出的CSS的body标签的背景。 – ckaufman 2012-03-01 18:10:20

其工作很好。谢谢老板。我无法解决第二个问题。请提出建议修复。 – MAHESH 2012-03-01 19:09:12

德颜色

我倾向于将这样做这个。

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/

来源

2012-03-01 18:00:32 folktrash

为了提高灵活性，我会亲自使用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 */

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

来源

2014-01-30 15:31:08 BenPog

背景图片拉伸问题

回答

相关问题