Background images cannot be displayed on iPad.
P粉879517403
P粉879517403 2023-07-25 11:58:00
0
1
688
<p>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. </p> <pre class="brush:php;toolbar:false;">.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; }</pre> <p><br /></p>
P粉879517403
P粉879517403

reply all(1)
P粉680087550
.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,使背景图片能够随内容在这些设备上一起滚动。
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!