今天改版一个网站,网站顶部是一个蓝天白云的图片做背景 1440*300像素的
代码如下
- HTML code
<%@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里所有的内容有多少情况下,怎么让背景图片永远都紧贴页面的顶部呢?
------解决方案--------------------
修改成
background-position: center top;
就可以了。