Question

我试图获得可以缩放整个图像的背景图像，而不依赖于图片的大小，并且适合所有显示完全相同的屏幕。我得到了它的工作，但在我改变了画面之后它再次工作了。哦，我正在使用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;

}

编辑：

heres html http://jsfiddle.net/jw7L2s3y/

Answer 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;

}

CSS背景图像 - 响应式图像，可根据图像大小进行缩放

1 个答案: