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

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像素x 1228像素，但它可能只有10像素宽，带有repeat-x。仅此一项就可以将文件大小从851kb减少到~10kb。