如何防止我的背景图像缩小？

我有一个我的引导行的背景图像。当我调整浏览器窗口的大小（缩小）时，图像会随之缩小。如何防止我的背景图像缩小？

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

我有以下的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>

缺少什么我在这里？

来源

2017-08-09 AngryHacker

你可以把小提琴？ –

它的收缩只是因为你设置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 */

来源

2017-08-09 05:33:03 codesayan

根据你代码中的错误是在这里，

.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属性以支持其他浏览器以防万一。

来源

2017-08-09 05:33:41 Sand

尝试做这样的

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

希望这将有助于你

.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 */ 
 
    
 
}

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

来源

2017-08-09 05:36:22

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

.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; 
 
\t background-position: fixed; 
 
    height:700px; /* image height is also 700px */ 
 

 
}

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

来源

2017-08-09 05:37:25

如何防止我的背景图像缩小？

回答

相关问题