制作背景图片全宽

Question

我想要整幅背景图片。我有如下的CSS代码。

background: url(../images/img.png) 50% 50% no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%;

但有了这个代码图像与双方的余量。当然，我在body tag中做了margin：0。 感谢您的帮助！

Answer 1

您可以使用下面的CSS。

body, html { 
     height: 100%; 
    } 

    .bg { 
     /* The image used */ 
     background-image: url(../images/img.png); 

     /* Full height */ 
     height: 100%; 

     /* Center and scale the image nicely */ 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 

Answer 2

你开始的背景是50% 50%，这有点奇怪。所以，你要做的就是用background-size: cover;并确保你给no-repeat：

body {background: url("https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=") no-repeat; background-size: cover;}