title: How to put a background image on a div of a responsive login form?
body: <p>I have trouble putting a background image on a div of a login form done with bootstrap, but I have not managed to do it. The login page has the login form on the left and an image on the right.
  Here I leave the code of what I have done:</p>
  
  <p>File Login.php: </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
        &lt;html 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;title&gt;SOLVentas | Sales Systems&lt;/title&gt;
  
      &lt;!-- CSS --&gt;
      &lt;link rel="stylesheet" href="public/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="public/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="public/css/form-elements.css"&gt;
      &lt;link rel="stylesheet" href="public/css/style.css"&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;!-- Favicon and touch icons --&gt;
      &lt;link rel="shortcut icon" href="ico/favicon.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"&gt;
  
      &lt;style type="text/css"&gt;
  
       div.container {
  margin: 0 !important;
  margin-right: 0 !important;
   padding-right: 0 !important;
  padding-left: 0 !important;
    }
  
    #formulario, #imagen {
  /*border: 2px solid red !important;*/
  margin-right: 0 !important;
    }
  
     form input {
     padding: 10px !important;
     border: 1px solid rgba(0,0,0,0,2) !important;
     height: 40px !important;
  
      }
  
      button {
      background-color: blue !important;
        }
      /*#imagen {
  
     background-image: url() !important;
  
            background-position: center center !important;
  
      background-repeat: no-repeat !important;
  
       background-attachment: fixed !important;
  
       background-size: cover !important;
  
      background-color: #66999 !important;
  
            } */
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
  
  
             &lt;!-- Top content --&gt;
  
         &lt;div class="container" style="margin: 0; padding: 0;"&gt;
          &lt;div class="row" style="margin: 0; padding: 0;"&gt;
          &lt;div class="col-sm-12 col-md-4 col-lg-4" style="margin: 0; padding-left: 0; padding-right: 0; "&gt;
              &lt;div class="form-top"&gt;
                              &lt;div class="form-top-left"&gt;
                                  &lt;h3&gt;Get Access to your Account&lt;/h3&gt;
                                  &lt;p&gt;Insert your username and password to Log in:&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="form-top-right"&gt;
                                  &lt;i class="fa fa-lock"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-bottom" style="background-color: #F3F3F3;"&gt;
                              &lt;form role="form" id="frmIngresar" name="frmIngresar" method="post" class="login-form"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="sr-only" for="form-username"&gt;User&lt;/label&gt;
                                      &lt;input type="text" name="form-username" placeholder="User..." class="form-username form-control" id="form-username"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="sr-only" for="form-password"&gt;Password&lt;/label&gt;
                                      &lt;input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password"&gt;
                                  &lt;/div&gt;
                                  &lt;button type="submit" class="btn"&gt;Log In&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
          &lt;/div&gt;
           &lt;div class="col-sm-12 col-md-8 col-lg-8" style="background-image: url('img/backgrounds/1.jpg');  width: 66%; min-height: 100vh; background-repeat: no-repeat; background-size: cover; margin: 0; padding: 0; "&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- Javascript --&gt;
      &lt;script type="text/javascript" src="public/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/js/jquery.backstretch.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/js/bootbox.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function() {   
              $("form#frmIngresar").submit(IngresarSistema);
  
  
          function IngresarSistema(e) {
              e.preventDefault();
  
              var user = $("#form-username").val();
              var pass = $("#form-password").val();
  
              $.getJSON("ajax/UsuarioAjax.php?op=IngresarSistema", {user: user, pass: pass}, function(r) {
                  if (r) {
                      $(location).attr("href", "acceder.php");
                      //window.location.href = "acceder.php";
                  } else {
                      bootbox.alert("Error! Username or password are not correct!");
                      $("#form-username").val("");
                      $("#form-password").val("");
                      $("#form-username").focus();
                  }
              });  
          }
  
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The result is something like that: </p>
  
  <p><a href="https://i.stack.imgur.com/XI32S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XI32S.png" alt="enter image description here"></a></p>
  
  <p>The image does not cover the entire right container. There is a kind of small margin to the right. If I put a width of 100% the image is lowered to the other row, being below the login form and that is not the idea.</p>
  
  <p>The login page should look like this: </p>
  
  <p><a href="https://i.stack.imgur.com/lyg1l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lyg1l.png" alt="enter image description here"></a></p>
  
  <p>How could I get it? When the login is displayed on a mobile device with a resolution lower than 770px wide and 400px high I would like the image to no longer appear, only the form. But I do not know how to do it. Any suggestions?</p>