title: Background image based on mobile or desktop
body: <p>I created a webpage that only display background image  and text on footer that worked great for desktop user visitor but for mobile user visitor the image are not auto resize to they screen size.</p>
  
  <p>Here this is my css  </p>
  
  <pre><code>body {
      margin-top: 50px;
      margin-bottom: 50px;
      background: none;
  }
  
  .full {
    background: url('../1_v3.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
  }
  .navbar-header {
      float: left;
      padding: 15px;
      text-align: center;
      width: 100%;
  }
  .navbar-brand {float:none;}
  </code></pre>
  
  <p>And this is the html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="full" lang="en"&gt;
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;TEXT HERE/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="css/the-big-picture.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"&gt;
  
          &lt;div class="container"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand"&gt; TEXT HERE&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;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/nav&gt;
      &lt;!-- /.container --&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Are there is any css trick to resize the background image based on user device screen size?</p>
  
  <p>P/s : My image are size 2536x1420 resolution</p>