背景图片 - 响应问题CSS

时间:2015-07-09 13:37:32

标签: css twitter-bootstrap-3 responsive-design

我使用bootstrap并且我有一张背景图片。它由CSS设置实现基本上是一种视差。 一切正常,但图片尺寸为4066 x 4066,因此我将尺寸设置为background-size: 36%。问题在于响应式视图:在手机上看起来很小。知道如何解决这个问题吗?

您可以查看下面的代码:

#home{
  background-size: 36% !important;
  background-position: 50% 26% !important;
  background: url('/assets/img/light_green2_home.png')  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  display: block;
  position: relative;
  height: 520px;
}

2 个答案:

答案 0 :(得分:1)

您可以使用(对于小于600像素的屏幕):

@media all and (max-width: 600px) {

     #home{
       background-size: 50% !important;
    }

}

答案 1 :(得分:1)

您正在实施响应式背景图像。 考虑在媒体查询集上使用max-width来调整background-size: "some percentage"。我建议使用background-size:cover作为原始图片,这样可以确保您的图片填充元素而不会重叠或“重叠”。

#home {
  background-size: cover;
}

@media all and (max-width: "some number"px) {
  #home {
    background-size: 60%;
  }
}

关于CSS媒体查询的一些阅读here

我建议不要针对特定​​的设备尺寸,而是将max-width设置为刚开始看起来太小的时候。