在CSS中背景图片的填充方法：
background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-repeat:repeat-x(水平方向平铺) background-repeat:repeat-y(垂直方向平铺)
主要是css样式：
*{ margin:0; padding:0; } html{ /* This image will be displayed fullscreen */ background:url('http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png') no-repeat center center; /* Ensure the html element always takes up the full height of the browser window */ min-height:100%; /* The Magic */ background-size:cover; } body{ /* Workaround for some mobile browsers */ min-height:100%; font:14px/1.3 'Segoe UI',Arial, sans-serif; } a, a:visited { outline:none; color:#1c4f64; } a:hover{ text-decoration:none; } section, footer, header{ display: block; } footer{ background-color: #111111; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.4); height: 45px; left: 0; position: fixed; width: 100%; z-index: 100000; } footer h2{ color: #EEEEEE; font-size: 14px; font-weight: normal; left: 50%; margin-left: -400px; padding: 13px 0 0; position: absolute; width: 540px; } footer h2 i{ font-style:normal; color:#888; } footer a.tzine,a.tzine:visited{ color: #999999; font-size: 12px; left: 50%; margin: 16px 0 0 110px; position: absolute; text-decoration: none; top: 0; } footer a i{ color:#ccc; font-style: normal; } footer a i b{ color:#c92020; font-weight: normal; }
而你肯定想不到“主”代码是非常简单的，哈哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS之生成全屏背景图片</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />
</head>
<body>
</body>
</html>