我想要整幅背景圖片。我有如下的CSS代碼。製作背景圖片全寬
background: url(../images/img.png) 50% 50% no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%;
但有了這個代碼圖像與雙方的餘量。當然,我在body tag中做了margin:0。 感謝您的幫助!
我想要整幅背景圖片。我有如下的CSS代碼。製作背景圖片全寬
background: url(../images/img.png) 50% 50% no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%;
但有了這個代碼圖像與雙方的餘量。當然,我在body tag中做了margin:0。 感謝您的幫助!
您可以使用下面的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;
}
你開始的背景是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;}