[分享]css全屏背景图片代码

CSS全屏背景图片可以让网页看起来更加美观，也能提高用户的体验感。下面是一段CSS代码实现全屏背景图片：

body {
  background: url("image/background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} 

将上述代码插入到你的head标签里面，其中"image/background.jpg"是你想设置的图片的路径。代码中的-webkit、-moz、-o这些前缀是为了兼容不同的浏览器。

使用CSS全屏背景图片也有一些需要注意的地方。首先必须保证图片的分辨率高，否则在大屏幕下可能会出现像素化的现象。其次需要确保文本和其他内容不会被图片覆盖，要调整好背景图片的大小和位置。

最后，还有一种更加灵活的实现方式，就是使用CSS3中的background-size属性，将背景图片拉伸和裁剪来适应不同的屏幕大小，代码如下：

body {
  background: url("image/background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 1200px) {
  body {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
  }
} 

使用此方法，当屏幕宽度小于1200像素时，背景图片的高度将被拉伸并适应屏幕，而宽度则保持原始大小和比例。

总的来说，CSS全屏背景图片是一种简单实用的网页设计技巧，通过良好实现它可以增加网站的易用性和美观度。