title: CSS background and background-image only shows up on chrome desktop broswer
body: <p>The image of a background: or background-image: not showing up on website, img src not showing up either.</p>
  
  <p>However, all pictures show up fine only on chrome desktop broswer, but they don’t show up on chrome mobile broswer. Some of the browsers I’ve tested and don’t show the images on my website are: chrome mobile, safari mobile, IE desktop, Microsoft edge desktop.</p>
  
  <p>The entire html css code can be found at the website, is it allowed to include the link in my post?
  styles.css</p>
  
  <pre><code>.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;
      /*        background-attachment: fixed;*/
      /*    -o-background-size: cover;*/
      /*-moz-background-size: cover;*/
      /*-webkit-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;
  } /*----end main page styles---*/
  
  /* 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;
  } /*-----end header styles----*/
  
  /* Navigation styles */
  #access {
      background: url('./imgSrc/access_bg.png');
      /*
      opacity: 0.8;
      filter:alpha(opacity=80);
      */
      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);
  }
  </code></pre>
  
  <p>Case of using background: HTML</p>
  
  <pre><code>&lt;body&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="header"&gt;
                  &lt;div class="headerIMG" style="background: url(imgSrc/planet.jpg) no-repeat center bottom;"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="siteTitle"&gt;
                      &lt;h1&gt; Rocky Mountain Chess Rating System&lt;/h1&gt;
                      &lt;h2&gt; Idaho Chess Association Database&lt;/h2&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Further down in the html file above:</p>
  
  <pre><code> &lt;div class="main"&gt;
                  &lt;div class="icaImg"&gt;
                      &lt;a href="https://www.idahochessassociation.com/"&gt; &lt;img src="imgSrc/icaLogo.png"&gt; &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="contentGameEnter"&gt;
                      &lt;div class="enterGame"&gt;
  </code></pre>
  
  <p>Just tested it, this is an update edit, images appear on safari desktop and Firefox desktop. So the browsers which don’t work are mobile browsers and IE desktop, Microsoft edge desktop</p>