某些移动设备上不显示背景图像

时间:2021-02-03 17:13:27

标签: html css

几天前我推出了一个网站,我在其中将图片设置为索引页横幅中的背景。
该图像在所有桌面浏览器和大多数手机上都可以正常显示,但我的一位朋友刚刚评论说它没有显示在她的手机上。我不知道为什么。 这是我第一次做网站,所以还有很多我不确定的事情。 该网站名为 www.mitsi.be 这是我使用的代码:

HTML:

    <main>
      <section class="index-banner">
        <div class="leeg">
        </div>
        <small> Copyright &copy; 2021 Jeanne De Preter. All Rights Reserved</small> 
      </section>
 </main>

CSS:


   .index-banner {
   width: 100%;
   height: calc(100vh - 100px);
   background-image: url('images/onderdrukkingsposter.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   text-align: end;
}

.leeg  {
   height: 92%;
}

@media only screen and (min-width: 410px) {
   .leeg  {
       height: 95%;
   }    
}

@media only screen and (min-width: 1000px) {
   .wrapper { 
       width: 1000px;
       margin: 0 auto;
   }
   .index-banner {
       height: 600px;
   }
}
@media only screen and (min-width: 1800px) {
   .index-banner {
       height: 980px;
   }
}

感谢您的帮助!

0 个答案:

没有答案