title: CSS Background image not showing up in Android device
body: <p>I am kind of a beginner in web dev, I was making my own website. The website can be accessed here</p>
  
  <p><a href="https://www.shafirpl.com/" rel="nofollow noreferrer">https://www.shafirpl.com/</a></p>
  
  <p>The problem is when I load the page on my iPhone(including both chrome and safari) or in desktop environments(such as MacBook) the background image shows up. However, on an android phone (tested with pixel xl and Samsung galaxy s8+) the background image doesn't show up. Which is even more strange is that I used chrome in my iPhone 7 plus, in which the background image loaded up perfectly, but using same chrome browser on pixel xl won't load the background image.</p>
  
  <p>I have included my relevant part of HTML and CSS code. The website is being served using express server(node js), and I used bootstrap as well as my own CSS </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body{
    background: url(/images/image3.jpg);
    background-size: cover;
    background-position: center;
    font-family: 'Lato', sans-serif;
    color: orange;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Shafi&lt;/title&gt;
  
      &lt;!-- This is the google font lato --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"&gt;
  
      &lt;!-- Bootstrap Cdn --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  
  
      &lt;!-- This is our own style sheet, we are adding it after bootstrap so that
      it has highest precedence compared to bootstrap, remember
      in css, the one comes late has more precedence --&gt;
      &lt;link rel="stylesheet" href="/stylesheets/homepage.css"&gt;
  
      &lt;!-- Fontawesome cdn --&gt;
      &lt;link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- The navbar --&gt;
      &lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="/"&gt;Shafi&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;!-- This active class will make the home appear highlighted or active --&gt;
          &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/about"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/experience"&gt;Work Experience&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/protfolio"&gt;Protfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/education"&gt;Education&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="/resume" target="_blank"&gt;&lt;i class="fas fa-file"&gt;&lt;/i&gt; My Resume &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contact"&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  
  
      &lt;!-- This is for the background image --&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
  
            &lt;!-- Centering everything with this div --&gt;
              &lt;div id="content"&gt;
                &lt;h1&gt;Hello World! This Is Shafi&lt;/h1&gt;
                &lt;h3 class="bolder"&gt;Student &amp; Passionate Software Engineer&lt;/h3&gt;
                &lt;hr&gt;
                &lt;a href="/about"&gt;&lt;button type="button" name="button" class="btn btn-default btn-lg" href="/about"&gt;&lt;i class="fa fa-laptop-code"&gt;&lt;/i&gt; About Me&lt;/button&gt;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;% include ../partials/footer.ejs %&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>