title: Responsive Bootstrap modal without page scrollbars
body: <p>I have this jsFiddle: <a href="http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/" rel="nofollow noreferrer">http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/</a></p>
  
  <p>The Bootstrap modal needs to fill most of the page, be placed 100px from the top of the page and not cause the page to scroll. In other words, the entire modal needs to show in the display area. It also has a background image that needs to fit the modal in responsive fashion.</p>
  
  <p>I've used this <a href="https://stackoverflow.com/questions/18432394/how-to-make-twitter-bootstrap-modal-full-screen">SO post</a> to help, along with <a href="http://sixrevisions.com/css/responsive-background-image/" rel="nofollow noreferrer">this article</a>. But how do you limit the modal to the display area without scrollbars and keep the background image responsive? As you notice, in some screen sizes, the modal cuts off the people in the picture at the knees. </p>
  
  <p>The solution can include jQuery so it doesn't have to be pure CSS. Thanks.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup"&gt;
    Launch modal
  &lt;/button&gt;
  
  &lt;div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup"&gt;
      &lt;div class="modal-dialog center-block"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="gridSystemModalLabel"&gt;Modal title&lt;/h4&gt; 
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                 Content goes here.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.modal {
    top:100px;  
  }
  .modal-backdrop {
    top:100px;
  }
  .modal-dialog {
    width: 95%;
    height: 100%;
    padding: 0;
  }
  .modal-content {
    min-height: 100%; 
    height: auto;
    border-radius: 0;
    overflow:auto;
    background-size: cover;
    background-image:  url('data:image/jpg;base64, /* ... image code ... */');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center center;   
  }
  </code></pre>
  
  <p><strong>Update</strong>: Here's close to a solution: <a href="http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/" rel="nofollow noreferrer">http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/</a> It still doesn't play nice with the background image of the modal, as it gets clipped, but I don't think there's any way around that. </p>