[分享]css中如何将背景图百分百填充

在进行页面设计时，背景图是一项非常重要的元素。不过，有时候我们会遇到这样一种情况，就是无论怎么调整背景图片，它都无法完全填充父容器，这时候该怎么办呢？? .bgimg { backgroundima...

在进行页面设计时，背景图是一项非常重要的元素。不过，有时候我们会遇到这样一种情况，就是无论怎么调整背景图片，它都无法完全填充父容器，这时候该怎么办呢？

 .bg-img {
        background-image: url(图片地址);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
    } 

上面这段代码可以有效地解决上文中提到的问题。

具体来讲，我们通过设置background-size属性值为cover，即可将背景图完全填充进父容器。同时，设置background-attachment为fixed可让背景图跟随滚动条上下移动。

如果需要平铺显示背景图，则可以将background-size设置为100% 100%。

总结起来，通过设置background-size为cover或100% 100%，即可将背景图百分百填充。