在CSS中背景图片的填充方法：
background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-repeat:repeat-x(水平方向平铺) background-repeat:repeat-y(垂直方向平铺)
主要是css样式：
*{
margin:;
padding:;
}
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:;
box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
height: 45px;
left:;
position: fixed;
width: 100%;
z-index:;
}
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:;
}
footer a i{
color:#ccc;
font-style: normal;
}
footer a i b{
color:#c92020;
font-weight: normal;
}
backgroundimagestyles.css
而你肯定想不到“主”代码是非常简单的，哈哈。
<!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>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS之生成全屏背景图片</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />
</head>
<body>
</body>