使背景图像全宽

【问题标题】：Making the background image full width使背景图像全宽
【发布时间】：2017-07-14 18:10:32
【问题描述】：

我想要整个宽度的背景图像。我的 CSS 代码如下。

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

但是使用此代码图像有两侧的边距。我当然在 body 标签中设置了 margin:0 。感谢您的帮助！

【问题讨论】：

【解决方案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;
    }

【讨论】：

【解决方案2】：

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

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

【讨论】：