Why is the background image not showing up on my website? The img src is also not displaying.
All pictures show up fine on Chrome desktop browser, but not on Chrome mobile browser. Other browsers that are not displaying the images include Safari mobile, IE desktop, and Microsoft Edge desktop.
The entire HTML CSS code can be found on the website. Is it okay to include the link in my post? styles.css
.wrapper {
background: #fff;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: url('./imgSrc/chessbk.png');
background-position: center;
background-size: cover;
}
/* Main page style */
.wrapper .main {
position: relative;
clear: both;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0 0 0 0;
}
.main {
background-image: linear-gradient(rgba(172, 207, 229, 1), rgba(172, 207, 229, .1));
clear: both;
overflow: hidden;
padding: 0px 0 0 0;
}
/* Main page header style */
.header {
position: relative;
z-index: 1;
}
.header .headerIMG {
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .3;
width: 100%;
height: 100%;
}
.siteTitle {
padding-top: 25px;
text-align: center;
margin: 0 auto;
width: 940px;
position: relative;
color: floralwhite;
padding-bottom: 25px;
}
/* Navigation styles */
#access {
background: url('./imgSrc/access_bg.png');
display: block;
float: left;
margin: 0 auto;
width: 940px;
font-weight:bold;
border-top:1px solid rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,1);
}
Case of using background: HTML
<body>
<div class="wrapper">
<div class="header">
<div class="headerIMG" style="background: url(imgSrc/planet.jpg) no-repeat center bottom;">
</div>
<div class="siteTitle">
<h1> Rocky Mountain Chess Rating System</h1>
<h2> Idaho Chess Association Database</h2>
</div>
Further down in the html file above:
<div class="main">
<div class="icaImg">
<a href="https://www.idahochessassociation.com/"> <img src="imgSrc/icaLogo.png"> </a>
</div>
<div id="contentGameEnter">
<div class="enterGame">
After testing, updated information reveals that the images now appear on Safari and Firefox desktop, but still not displaying on mobile browsers or IE and Microsoft Edge desktop versions.