无法调整第二个背景空间的大小

Question

我现在刚开始使用网页编码，我为我可能想出的任何胡说八道的事情道歉。

我试图修改一个网站的模板。这个网站被分为两个背景图片，一个是顶部，有点超出了页面的中部，另一个应该是在页面的底部。

我想要做的是让顶部的背景图片更接近底部的导航栏，而不是让第二张背景图片位于底部导航栏所在的页面底部。

这是完整的CSS http://pastebin.com/h2KdKtdq

顶部的背景图片部分是

.bg1 {background:url(../images/bg1.gif) center 0 repeat-x; min-height:100%;}

而底部的背景图片部分

body { 
background:url(../images/bg.gif) 50% 0 repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
line-height:18px;
color:#978e83;
min-width:1003px;
}

奇怪的是，无论我对CSS中最底层的图片部分做什么，都不会产生任何效果，而如果我触摸顶部的图片部分，它就会把整个布局搞得一团糟。

到目前为止，我还没有找到任何选择，使底部的背景部分的空间来进一步道指，我真的被困在这一点上。

这是现在的风格

​

​

谢谢

Answer 1

既然你说你是编码新手，我就尽量简化。如果我简单化了，请原谅我。

实际上，我只是写了一个很长的解释，然后注意到地址栏在你的图像中是可见的-我检查了站点，顶部和底部实际上都是bg1.gif。身体背景图像只是更多相同的底色，以覆盖过去的底部的bg1.gif。

所以有一个简单的解决方案：

    .bg1{background-size: 100% 150%;}

只要更改第二个值，颜色块的大小就会发生变化。它所做的只是缩放背景，因为在这种情况下，背景是简单的颜色，它应该不会有很大的问题，插值图像。

这是解决当前问题的最简单方法。理想情况下，您应该对整个背景进行不同的编码。我将在下面发布另一个回复，说明如何做到这一点。

编辑:我刚刚注意到在彩色区域之间有一条很小的线，颜色区域有一个几乎无法察觉的纹理-不管我的上面的解决方案仍然有效，轻微的失真。只要你不做太多伸展运动，你就会没事的。

如果你想做到这一点，没有任何扭曲，最简单的解决办法是只编辑图像，并在顶部添加更多的空间。无论如何，编辑图像是个好主意，因为当前设置背景的方式需要大量开销。背景是1309 px x 1228 px，但它可能只有10 px宽与重复x。仅这一项就可以将文件大小从851 to减少到~10 to。