引导CSS / HTML背景图像调整大小 [英] Bootstrap CSS/HTML background image resize

问题描述

在调整浏览器大小时使用引导程序，背景中的图片会缩小，背景颜色不会显示。

Using bootstrap when I resize my browser, the picture that is in the background shrinks and the background color doesn't.

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

Here is the link to the site which contains the HTML code: http://codedifferently.com/crest.html

以下是我使用的CSS代码：

Here is the CSS code that I used:

@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;
}

推荐答案

当然，因为 background-color do NOT 缩小，但我认为你的意思是你的Image应该调整大小，颜色应该 NOT 看起来像现在处于全景状态。所以如果明白这一点是正确的。

If I understand correctly, not sure, because the background-color do NOT shrink, but I think you mean that your Image should resize and the color should NOT appear like when it is now in full view. So If understand that correctly.

更改：

Change this:

background-size: 100%;

至

background-size: cover;

并添加浏览器的供应商以使其跨越浏览器：

and add the browser's vendors to make it cross browser:

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

详细了解 background-size

See more info about background-size

这篇关于引导CSS / HTML背景图像调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！