Background images cannot be displayed on iPad.

Question

I placed a background image below the navigation bar so that when you scroll down, the navigation bar moves down with you. But when I view it on my iPad, I see that the background image appears a dark blue that's close to black.

.background__image {
  width: 100%;
  background-image: url("https://background-image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  height: 800px;
  text-align: center;
  display: flex;
  justify-content: center;
}

Answer 1

.background__image {
  width: 100%;
  background-image: url("https://background-image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  height: 800px;
  text-align: center;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Adjust the max-width value as needed */
  .background__image {
    background-attachment: scroll;
  }
}

尝试使用媒体查询设置最大宽度为768px（根据您的需求进行调整），以针对较小的屏幕，如iPad或其他移动设备。在媒体查询内部，将background-attachment属性设置为scroll，使背景图片能够随内容在这些设备上一起滚动。