如何使div背景图片具有响应性？

Question

我想使div的背景图片响应式。我使用了bootstrap 3.3
我已经为背景图片编写了自己的css。我的代码如下。

.search-row-wrapper
{
  background:url(../../Images/frontend/MassageBanner.jpg );
  background-size: cover;
  height:400px;
  padding:50px 0;
  transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;
  -webkit-transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;width:100%;
}

我查看了来自stackoverflow的以下相同问题链接，但它们对我没有起作用。 链接1 链接2

- Ronp

---

你的代码没问题，你是不是想在所有尺寸下调整图像以适应 div 的大小？ - Claudiordgz

是的，我想使 div 的 background-image 适应所有大小，如（手机、平板或台式电脑）。 - Ronp

尝试在其中添加 background-position: center;。 - Claudiordgz

是的，（background-position: center;）它有效。谢谢 @Claudiordgz - Ronp

Answer 1

你只需要添加 background-position: center;，其余部分已经完美了。

- Claudiordgz

Answer 2

方法一：

html { 
  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;
}

适用于：

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+

方法2：

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

适用于：

• Safari / Chrome / Opera / Firefox / IE 9
• IE 6：存在问题 - 但如果您使用某种固定定位支架，可能可以修复
• IE 7/8：大部分情况下正常工作，在小尺寸下无法居中但可以填充屏幕。

有关方法和更多信息，请参阅本文，对您的问题很有帮助。

- user2592416