Question

我正在尝试将背景图片固定为我的网站的横幅。我使用的代码是 html

<div class="section-1 box text-center">
      <h1>WELCOME TO CAR ARENA</h1>
      <p><i>THE BEST CAR ACESSORIES ONLINE CART IN KERALA</i></p>
    </div>

css

.section-1 {
 z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url(../images/car.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

但是在移动模式下，它无法正常工作。查看我的网站here

Answer 1

您应该使用@media为手机和平板电脑格式使用额外的代码。我建议您在那里玩，并记得使用display：flex和其他响应属性。

我将为您链接W3C的有用链接 mediaqueries

Answer 2

将您的CSS更改为此。根据第一个答案，请使用媒体查询来使其不仅正常工作，而且在移动设备上看起来不错。

.section-1 {
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center; // make sure your image remain centered
    background-image: url(../images/car.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 3

您可以将大小更改为background-size: cover;。这将使图像占据其比例所需的空间。图像变宽然后变高，它不会像在桌面上那样具有效果。

.section-1 {
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-image: url(../images/car.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

我建议您针对移动用途调整特定的图像，这意味着将其缩小和变高，然后您可以像这样使用它。

.section-1 {
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-image: url(../images/car-mobile.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media screen and (min-width: 767px) {
  background-image: url(../images/car.jpg);
  background-size: contain;
}

Answer 4

您可以使用媒体查询更改background-size: 100% 100%;，以适合您身高的手机情况

@media only screen and (max-width: 600px) {
   .section-1 {
       background-size: 100% 100%;
   }
}

Answer 5

尝试此代码。

@media only screen and (max-width: 767px) {
    .section-1 {
         background-size: cover; 
         background-position: bottom;
    }
    .box{
        display:block;
    }
}

如何在移动视图中调整固定背景图像的大小？

5 个答案: