[分享]css做全屏背景图片

CSS可以很方便地实现全屏背景图片效果，做一张美丽的背景图片，让网页更加精美和突出，下面是一份基础的CSS代码。 首先，在html文件中，可以在body标签中添加如下CSS代码： body { bac...

CSS可以很方便地实现全屏背景图片效果，做一张美丽的背景图片，让网页更加精美和突出，下面是一份基础的CSS代码。

首先，在html文件中，可以在body标签中添加如下CSS代码：

 body {
        background-image: url("your-image-url.jpg"); /*设置背景图片，可以是相对路径或绝对路径*/
        background-size: cover; /*将图片缩放到与容器完全匹配*/
        background-position: center center; /*让图片水平和垂直居中*/
        background-repeat: no-repeat; /*保证图片不会重复*/
    } 

此时，我们完成了全屏背景图片的基本设置，但是还有一些需要注意的事项。

首先，由于图片大小不一，所以在背景中进行缩放时，可能会存在一些失真的情况。因此，更好的方案是将图片的长宽比与容器匹配，而不是完全匹配。

其次，如果容器的高度小于图片的高度，当页面滚动时，背景图片不能够全部展示，这是需要进行处理。解决方法是可以将CSS代码应用到html和body标签上：

 html, 
    body {
        height: 100%; /*设置html和body标签高度为100%*/
    }

    body {
        overflow: hidden; /*去掉body标签滚动条*/
    } 

这样，背景图片就能够在整个页面中展示，而且不会出现失真或显示不完整的情况。

最后，需要注意的是，对于不支持CSS3的旧浏览器，可能不支持background-size属性。这时，可以采用JavaScript/jQuery等工具来实现全屏背景图片效果。