首页 > 解决方案 > 背景图片在某些移动设备上不显示

问题描述

几天前我启动了一个网站,在该网站中,我在索引页面的横幅中设置了一张图片作为背景。
该图像在所有桌面浏览器和大多数手机上都可以正常显示,但我的一位朋友刚刚评论说它没有在她的手机上显示。我不知道为什么。这是我第一次做网站,所以还有很多事情我不确定。该网站名为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;
   }
}

谢谢您的帮助!

标签: htmlcss

解决方案


推荐阅读