用css设置背景色和背景图片：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

 

设置为背景色是蓝色，然后添加了一张背景图，效果：

 

wKioL1QiAxODKv-hAAagxM4HDdg350.jpg

 

默认背景图铺满了整个页面，那么更改一下，让图片向X轴也就是水平方向平铺过去我们加一个属性：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:repeat-x;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

 

出现的是这样的一个效果：

 

wKioL1QiBDaA9wgNAAKyGVojgx0986.jpg

 

那么我们要让图片纵向平铺怎么办呢，直接将background-repeat:repeat-x;更改成background-repeat:repeat-y;就可以了，来看下效果：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:repeat-y;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

 

wKioL1QiBLWBfT9hAAHLIwrCpGA253.jpg

那么我们不要让图片平铺只要一张图片怎么办呢，background-repeat:repeat-x;横向平铺background-repeat:repeat-y;纵向平铺那么不平铺就是background-repeat:no-repeat;：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background-color:blue;
    background-p_w_picpath:url(F:\ss.jpg);
    background-repeat:no-repeat;
   }
  </style>
 </head>
 <body>
 
 </body>
</html>

效果：

wKiom1QiBa6RZvg-AAEOzuvRdJU271.jpg

 

再来看一个属性background-p_w_upload:fixed;这个属性能让图片固定住：

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   body{

    background-color:blue;

    background-p_w_picpath:url(F:\ss.jpg);

    background-repeat:no-repeat;

    background-p_w_upload:fixed;

   }

  </style>

 </head>

 <body>

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

 </body>

</html>

 

添加上属性，再用<br />来让页面滚动条出现，这样更能看出效果：

 

wKiom1QiB0jw0ouEAAFBqdgGdYU004.jpg

注意右侧滚动条往下拉图片还是在左上角不动