Question

嘿，我是新来的，我很感激任何帮助，因为我几个星期以来一直撞在墙上。

我目前正在开发一个位于blog.honora.com的Wordpress主题。如果您看一下，您会看到有一个图像停止然后形成白色背景。该图片位于http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg。它显然是重复但由于某种原因它想要停止而不是下到页脚。我在CSS中尝试了很多东西。如果我将图像设置为固定，它会重复到底部但是当您使浏览器变小并从左向右移动时它会变得混乱。我需要一些像页脚一样移动的东西。

我肯定错过了一些非常简单的东西。我可以提供您需要的任何代码或者您需要的代码。我会指出你们可以提供的任何帮助。

提前致谢， -T

Answer 1

正如yoda所说，你不需要javascript或jQuery。所有你需要的是CSS。确保您拥有一个块元素（您可以使用body元素），其中包含除页脚之外的所有内容，并将背景属性应用于包含图像的元素。您可能需要修改图像，因为它非常宽。要让它在页面上一直重复，只需添加“repeat-y”属性。

可能看起来像这样：

body{
    background: url('URL of image') repeat-y;
}

Answer 2

您不需要javascript来应用背景，只需使用css即可。创建2个主要div：site_content和footer。告诉site_content“捕获”除了页脚以外的所有属于该网站的内容，并设置您想要的页脚。

另外，在site_content中，请使用：http://www.webtoolkit.info/css-clearfix.html 它允许你有一个以垂直方式自动延伸的div。应用你的背景来重复这个div，它应该像魅力一样：）

Answer 3

看起来你正在使用图像并将其拉伸以适合你的背景，只需使用CSS来设置背景图像......这应该是你身体标签的CSS，然后删除图像。

body {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) center top}
 font-size: 62.5%; /* Resets 1em to 10px */
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

但添加此内容后，它与页脚中的拉伸图像不匹配

编辑：哇，我只看了你的页面代码......

您确实需要清理格式（我发现很多</div>没有开放<div>）。
删除用于背景和页脚的标记。
删除你的getH功能。
现在，为了让身体图像与你的页脚一起使用，你需要使用一个不包含你的页脚...这是一个例子：

好的，我不知道为什么我不能将HTML添加为代码，所以here is a link

然后将CSS改为：

#main-content {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) top center repeat-y;}
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 font-size: 10px;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

#footer {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/body_bg_about_4.jpg) bottom center repeat-x;}
 padding:0px;
 margin: 0 auto;    
 clear: both;
}

使用javascript或Jquery垂直拉伸图像

3 个答案: