title: Boostrap Large Image - Fixed Position & Responsive
body: <p>I'm trying to have an image float to the right of the page which resizes in Large, and Medium screens, but vanishes in Small and Xtra Small screens.</p>
  
  <p>I can make the image vanish using hidden-sm and hidden-xs in bootstrap, but im struggling to make the image (considering it's so large) float to the right of the page like the attached <strong>non-responsive</strong> picture.</p>
  
  <p>Do I need to use Width: % to make this move? I tried this and this doesn't work well in terms of being responsive etc..</p>
  
  <p><a href="http://i.stack.imgur.com/GpEe5.jpg" rel="nofollow">Screenshot - non-responsive</a></p>
  
  <p>Heres the HTML for the picture:</p>
  
  <pre><code>&lt;!-- PICTURE --&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-offset-md-9 col-md-3 hidden-sm hidden-xs"&gt;
          &lt;div class="BackgroundImage center-block img-responsive"&gt;&lt;img src="Pictures/Profile.png" alt="Background Image"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And heres the simple CSS i've got so far:</p>
  
  <pre><code>/* Background Image/Neil Photo */
  .BackgroundImage {
      width: 190px;
  }
  
  .BackgroundImage img {
      z-index: -1;
      margin-bottom: -366%;
      display: fixed;
  }
  </code></pre>