CSS 背景图像 - 响应式图像，不依赖图像大小进行缩放答案

【问题标题】：CSS background image - responsive image that scales without depending on image sizeCSS 背景图像 - 响应式图像，不依赖图像大小进行缩放
【发布时间】：2015-08-18 05:24:40
【问题描述】：

我正在尝试获取可以缩放整个图像的背景图像，而不取决于图片的大小，并且适合所有显示完全相同的屏幕。我让它工作了，但是在我改变图片之后它不再工作了。哦，我正在使用 Bootstrap 3。

这是我的 CSS：

.bg {

    background-image: url(http://pikahinaukset.wpengine.com/wp-  content/uploads/2015/06/coverphoto-e1433360465261.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) center center cover no-repeat fixed;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;

}

已编辑：

这里是 html http://jsfiddle.net/jw7L2s3y/

【问题讨论】：

标签： image twitter-bootstrap responsive-design background-image image-scaling

【解决方案1】：

你正在做一些多余的事情：背景中心和所有的东西然后你正在做背景图像、背景重复等等。它基本上和背景做同样的事情：.删除其中一个，我认为无论如何它都可以正常工作。

Working Jsfiddle here

.bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) ;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;

}

【讨论】：