Bootstrap CSS/HTML background image resize

当我调整浏览器的大小时使用引导程序，背景中的图片缩小，背景颜色不变。Bootstrap CSS/HTML background image resize

这里是链接到网站，其中包含HTML代码：http://codedifferently.com/crest.html

这里是CSS代码，我用：

@charset "UTF-8"; 

/* CSS Document */ 


/* Move down content because we have a fixed navbar that is 50px tall */ 

body { 
    padding-top: 0px; 
    padding-bottom: 20px; 
} 

div.jumbotron { 
    background-image: url('img/chicago2.jpg'); 
    background-color: #3FF; 
    background-size: 100%; 
    height: 500px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
} 

div.navbar navbar-default navbar-static-top" role="navigation { 
    border: 0px; 
}

来源

2014-10-05 cbandara

当你说背景颜色不缩水时，你的意思是你的图像背后的蓝色？ – 2014-10-05 00:05:08

是的，你有什么建议我应该如何调整这个？我希望它看起来像这个网站：http://www.crestonsolutions.com/ 它是用wordpress构建的，但它需要永久加载。这是一个静态网站，所以我认为使用HTML和CSS重建它会更好。 – cbandara 2014-10-05 00:09:56

更改背景大小：100％到背景大小：封面;在div.jumbotron – 2014-10-05 00:15:48

如果我理解正确的话，不知道的，因为background-color做不是缩小，但我认为你的意思是你的图片应该调整大小，并且颜色应该是而不是看起来就像它现在处于全景状态。所以如果明白了这一点。

更改此：

background-size: 100%;

到

background-size: cover;

，并添加浏览器的厂商，使其跨浏览器：

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;

查看更多信息关于background-size

来源

2014-10-05 00:10:40 dippas

我是否将所有这些添加到我的CSS中的div标签？ – cbandara 2014-10-05 00:12:56

首先，正如我在我的回答中所说的，只是替换'cover'的'100％'，这将使它在现代浏览器中工作，但为了使它跨浏览器，在这个类的CSS文件内部，您正在讨论'div .jumbotron'添加我在我的问题中所说的内容。理解？ – dippas 2014-10-05 00:15:35

这是正确的答案，如果你只是想要背景大小覆盖你有一个固定的高度，你做的（500px在.jumbotron）。与以前一样，这将不再缩小图像。为此，你有不同的选择。 1.你可以使用百分比高度（50％等），因此你的div（.jumbotron）可以按比例缩小。 2.使用CSS媒体查询为不同屏幕尺寸设置div（.jumbotron）的高度。 3.使用实际图像而不是背景图像。 – 2014-10-05 00:26:40

您的问题来自您的线路background-attachment: fixed;。这使得滚动时背景固定，并且background-position是相对于您的窗口。所以最后，你的背景相对于你的窗口而言，而不是你的jumbotron。

看到CSS problem with background-attachment:fixed;

编辑：我喜欢@ dippas的解决方案。

来源

2014-10-05 00:21:10

这不会是这里的问题。删除位置：固定不会修复。 – dippas 2014-10-05 00:26:42

我知道，在发帖后再次阅读您的答案，让我对问题有了新的认识。我想我有点偏见，因为在我看来，修复这个背景是一个问题。这就是为什么我upvoted你的答案。 – 2014-10-05 00:29:58

Bootstrap CSS/HTML background image resize

回答

相关问题