title: Background image, mobiles and media query
body: <p>I'm trying to make it responsive to mobiles. I have background image that won't correctly resize. I've tried a media query and have no idea why it doesn't work. My code if below;</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>.container3{
    display: flex;
    align-items: center;
    background-size: cover;
    height: 700px;
    text-shadow: 0.25px 0.25px 0.25px #000000;
    background-image: url('Images/homepage.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }
  
  @media all and (max-width:480px)and(min-width:0px) {
    .container3 {
      width: 100%;
      background-image: url('Images/homepage.jpg');
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt; 
    &lt;title&gt;Unity&lt;/title&gt;
    &lt;link href="Style.css" rel="stylesheet"/&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/&gt;
    &lt;meta name="viewport" content="width=500, initial-scale=1"&gt;
    &lt;body&gt;
  
      &lt;div class="container3"&gt;
        &lt;div class="title"&gt;
          &lt;h1&gt;
            bringing people together
          &lt;/h1&gt;
          &lt;p&gt;free advertising space&lt;/p&gt;
  
        &lt;/div&gt; 
      &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>