html - 背景图片在某些移动设备上不显示
问题描述
几天前我启动了一个网站,在该网站中,我在索引页面的横幅中设置了一张图片作为背景。
该图像在所有桌面浏览器和大多数手机上都可以正常显示,但我的一位朋友刚刚评论说它没有在她的手机上显示。我不知道为什么。这是我第一次做网站,所以还有很多事情我不确定。该网站名为www.mitsi.be
这是我使用的代码:
HTML:
<main>
<section class="index-banner">
<div class="leeg">
</div>
<small> Copyright © 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;
}
}
谢谢您的帮助!
解决方案
推荐阅读
- r - 如何处理移位数据
- android - 缓存的 notwork 图像在调试模式下工作正常,但在发布模式下显示占位符颤动,请问有什么解决方案吗?
- styled-components - 使用 React 的服务器端渲染会破坏风格吗?
- api - 用于基于不同字段返回相同模型的 RESTful 端点?
- reactjs - 创建项目构建时ckeditor4-react错误
- javascript - Safari中的开槽项目未填充容器的高度
- git - git fixup:获取原始提交的哈希
- apache - 问题在 Windows 中为 apache 2.4 定义虚拟主机不起作用
- webrtc - webrtc sdp 属性 a=max-recv-ssrc
- reactjs - 如何构建 React 应用程序并将文件导出到 /var/html/www 文件夹?