title: Background image not displaying on chrome mobile
body: <p>i am coding a webpage and learning flexbox. I came to a nice design and everything works perfectly on desktop ( when the window resizes everything is perfect). The elements also resize very nicely on mobile and tablet. </p>
  
  <p>The only problem i have is that the main Big Div has a background image that resizes perfectly everywhere except on chrome for mobile(android), and safari where it doesn't even show up in portrait mode and is all blown up in landscape.  It works as intended on the firefox app though(android).</p>
  
  <p>Here is the url: <a href="http://liferockets.com/bluemonk/" rel="nofollow">http://liferockets.com/bluemonk/</a></p>
  
  <p>Here's the Github branch for all the code: <a href="https://github.com/soulhima/bluemonk/tree/main-edits" rel="nofollow">https://github.com/soulhima/bluemonk/tree/main-edits</a></p>
  
  <p>and here's the code that is specifically handling that part of the page:
  Html
      </p>
  
  <pre><code>    &lt;div class="start-box-1"&gt;
          &lt;p class="start-text"&gt;I Want A : 
              &lt;select&gt;
                  &lt;option value="choice1"&gt;Choice 1&lt;/option&gt;
                  &lt;option value="choice2"&gt;Choice 2&lt;/option&gt;
              &lt;/select&gt;
              &lt;span class="start-button"&gt;Website&lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div class="start-box-2"&gt;
          &lt;p class="start-text"&gt;I Want A 
          &lt;span class="start-button"&gt;Design&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>background-image: url(../images/start-box.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  </code></pre>
  
  <p>Thanks for the help. </p>