My project includes a cover image in .jpg format that displays perfectly on desktop, but is invisible on mobile devices. When viewed through Live Server on Vscode, the image appears at all sizes including mobile, but when hosted on Netlify and accessed from a physical phone, it doesn't show up. This inconsistency is confusing as it gives the false impression that the site is complete. The dimensions of the image are 5585 x 3141 pixels. Here's a snippet of the code I used: Mobile background/cover image. Desktop background/cover image
html,
body,
header,
#intro {
height: 100%;
}
/* Spacing so navbar does not cover up the sections */
h2, #darkmode{
padding-top: 60px;
}
#intro {
background: url(../img/colorimage.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-nav-collapse {
background-color: #24355C;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background-color: #24355C;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background-color: #24355C;
}
}<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler first-button " type="button" data-toggle="collapse"
data-target="#navbarSupportedContent20" aria-controls="navbarSupportedContent20"
aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent20">
<!-- Links -->
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="middle nav-link" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="middle nav-link" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="middle nav-link" href="#examples">Examples</a>
</li>
<li class="nav-item">
<a class="middle nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="middle nav-link" href="#contact">Contact</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view">
<div class="mask rgba-black-strong">
<div class="container-fluid d-flex align-items-center justify-content-center h-100">
<div class="row d-flex justify-content-center text-center">
<div class="col-md-10">
<!-- Heading -->
<h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Your Name</h2>
<!-- Divider -->
<hr class="hr-light">
<!-- Description -->
<h4 class="white-text my-4">Welcome to my first project</h4>
<a class="btn btn-outline-white" href="#darkmode" role="button">Read more<i
class="fa fa-book ml-2"></i></a>
<!-- <button type="button" class="btn btn-outline-white">Read more<i
class="fa fa-book ml-2"></i></button> -->
</div>
</div>
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->