Question

我的bootstrap行有一个背景图片。当我调整浏览器窗口的大小（缩小）时，图像会随之缩小。

我正在尝试使图像保持居中并且不缩小。因此，当我使浏览器变小时，图像应保持在页面中心，其边缘基本上变得不可见。

我有以下CSS：

.my-bootstrap-row {
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    height:700px;  /* image height is also 700px */
}

并遵循HTML：

<div class="row my-bootstrap-row">
   blah blah
</div>

我在这里缺少什么？

Answer 1

缩小只是因为你设置background-size: 100% 100%;设置background-size: cover;，你也可以为背景图片寻找中心background-image: url(foo.jpg) center center;

.my-bootstrap-row {
background-image: url(foo.jpg) center center no-repeat; 
background-position:fixed; 
background-size: cover; 
background-repeat: no-repeat; 
height:700px;  /* image height is also 700px */

Answer 2

根据您的代码，错误就在这里，

.my-bootstrap-row {
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; //ERROR making the image shrink with the window remove this and set is as cover.
    background-repeat: no-repeat; 
    height:700px;  /* image height is also 700px */
}

尝试这样的事情，

.my-bootstrap-row {
    background: url("../images/bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

在我的代码中，背景属性在一行中，我还添加了size属性以支持其他浏览器以防万一。

Answer 3

尝试这样做

您正在使用background-size: 100% 100%使用background-size: cover

希望这会对你有所帮助

＆＃13;

.my-bootstrap-row {
    background-image: url(https://www.axure.com/c/attachments/forum/7-0-general-discussion/3919d1401387174-turn-placeholder-widget-into-image-maintain-interactions-screen-shot-2014-05-29-10.46.57-am.png); 
    background-position:fixed; 
    background-size: cover; 
    background-repeat: no-repeat; 
    height:700px;  /* image height is also 700px */
    
}

＆＃13;

<div class="row my-bootstrap-row">
   blah blah
</div>

＆＃13;

Answer 4

我使用background-size:cover代替background-size:100% 100%

＆＃13;

.my-bootstrap-row {
    background-image: url('https://peterwardhomes.files.wordpress.com/2014/12/goole-area-shot_005.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
	background-position: fixed;
    height:700px;  /* image height is also 700px */

}

＆＃13;

<div class="row my-bootstrap-row">
   blah blah
</div>

＆＃13;

如何防止背景图像缩小？

4 个答案: