28,404
社区成员
发帖
与我相关
我的任务
分享BODY设置背景图片的问题，麻烦指教一下
今天改版一个网站，网站顶部是一个蓝天白云的图片做背景 1440*300像素的
代码如下
这样加上背景图片以后，如果下面加一个和背景图片一样高的DIV ，一切现实都很正常
但是如果把DIV的高度改成400之后。背景图片就不是紧贴着页面顶端了，位置下移距顶端出现了空白。
那再不确定BODY里所有的内容有多少情况下，怎么让背景图片永远都紧贴页面的顶部呢？
代码如下
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body,td,th {
font-size: 12px; color:#000000; font-family:"宋体";
}
.font4 {
font-size: 14px;
color: #F9FC06;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
BODY {background-image: URL(bk.jpg);
background-position: center center;
background-repeat: no-repeat;
}
-->
</style>
<title>无标题文档</title>
</head>
<body style="margin:0; padding:0;">
<center>
<div style="width:960px; height:300px; border: solid 1px; ">
dd
</div>
</center>
</body>
</html>
这样加上背景图片以后，如果下面加一个和背景图片一样高的DIV ，一切现实都很正常
但是如果把DIV的高度改成400之后。背景图片就不是紧贴着页面顶端了，位置下移距顶端出现了空白。
那再不确定BODY里所有的内容有多少情况下，怎么让背景图片永远都紧贴页面的顶部呢？
...全文
请发表友善的回复…
发表回复
bug810 2012-06-15
- 打赏
- 举报
body {
margin-top: 0px;
margin-bottom: 0px;
}
margin-top: 0px;
margin-bottom: 0px;
}
一把编程的菜刀 2012-06-15
- 打赏
- 举报
BODY {background-image: URL(bk.jpg);
background-position: center center;
background-repeat: no-repeat;
}
你这样定义是让背景图片居中，当你有内容以后当然会出现空白，请后面的一个center改为top
，即居上
就可以了
代码如上面各位写的
background-position: center center;
background-repeat: no-repeat;
}
你这样定义是让背景图片居中，当你有内容以后当然会出现空白，请后面的一个center改为top
，即居上
就可以了
代码如上面各位写的
phf_sail 2012-06-15
- 打赏
- 举报
修改成
background-position: center top;
就可以了。
background-position: center top;
就可以了。
孟子E章 2012-06-15
- 打赏
- 举报
BODY {background-image: URL(bk.jpg);
background-position: center top;
background-repeat: no-repeat;
}
background-position: center top;
background-repeat: no-repeat;
}
bug810 2012-06-15
- 打赏
- 举报
经我测试你的代码本身就是正常的，没有看到你说的情况，在IE和谷歌内核下都测试通过，没见到你所说的白
stillmissher 2012-06-15
- 打赏
- 举报
[Quote=引用 1 楼 的回复:]
body {
margin-top: 0px;
margin-bottom: 0px;
}
[/Quote]
不可以啊，还是有空白。
body {
margin-top: 0px;
margin-bottom: 0px;
}
[/Quote]
不可以啊，还是有空白。
