title: How can I make my background image 'img-responsive'?
body: <p>I was wondering how can I make my background image using bootstrap 'img-responsive'? The background image is with in <code>hero</code>div </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;html lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Liam Docherty Digital Portfolio&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
  
    &lt;style&gt;
      body {
        margin: 0;
        padding: 0;
      }
      
      .navbar.navbar-default {
        background-color: #4D5061;
        height: 10vh;
        z-index: 100;
      }
      
      .navbar.navbar-default ul {
        list-style-type: none;
        text-align: right;
      }
      
      .navbar.navbar-default ul li {
        display: inline-block;
      }
      
      .dropdown-menu li {
        text-align: center
      }
      
      .dropdown .dropdown-menu {
        background-color: #4D5061;
      }
      
      .dropdown .dropdown-menu a {
        color: white;
      }
      
      .navbar.navbar-default ul li a {
        display: inline-block;
        padding: 3.5vh 8px 4px;
        color: white;
        text-decoration: none;
        font-size: 14pt;
        font-family: 'Roboto', sans-serif;
      }
      
      .navbar.navbar-default ul li:after {
        content: '';
        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 9px;
        transition: all .2s;
      }
      
      .navbar.navbar-default ul li a:hover {
        color: white;
      }
      
      .nav.navbar-nav,
      .nav.navbar-nav&gt;li {
        float: none;
      }
      
      .navbar.navbar-default ul li:hover:after {
        right: 0;
        left: 0;
      }
      
      .nav-title {
        font-size: 14pt;
        margin: 0;
        top: 35px;
        left: 50px;
        width: 100%;
        position: absolute;
        text-align: center;
        color: white;
        font-family: 'Roboto', sans-serif;
      }
      
      .navbar.navbar-default ul.dropdown-menu li,
      .navbar.navbar-default ul.dropdown-menu li a {
        position: relative;
        display: block;
      }
      
      #logo {
        padding-top: 2vh;
        padding-left: 20px;
        float: left;
      }
      
      .hero {
        background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
        background-attachment: fixed;
        position: relative;
        text-align: center;
        width: 100%;
        max-width: 100%;
        width: 100vw;
        height: 100%;
      }
      
      section {
        position: relative;
        height: 95vh;
      }
      
      .section1 {
        height: 100vh;
        text-align: center;
        color: white;
      }
      
      .section2 {
        background-color: #11B5E4;
        text-align: center;
        color: white;
      }
      
      .section3 {
        background-color: #FFFFFF;
        text-align: center;
        color: white;
      }
      
      .fa-angle-down {
        color: #4D5061;
        position: absolute;
        bottom: 0px;
      }
      
      .fa-angle-up {
        color: #4D5061;
        position: absolute;
        bottom: 0px;
      }
      
      .footer {
        height: 6vh;
        background-color: #4D5061;
        padding: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      
      .footertext {
        font-size: 14pt;
        color: white;
        font-family: 'Roboto', sans-serif;
        text-align: center;
      }
      
      .profile.box {
        bottom: 0;
        height: 50%;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
      }
      
      .shape {
        border-radius: 25px;
        background: #4D5061;
        content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
        color: white;
        height: 250px;
        margin: auto;
        padding: 3px;
        width: 250px;
      }
      
      .shape2 {
        background: linear-gradient(35deg, #4D5061, #4D5061);
        border-radius: 85px;
        color: white;
        height: 40px;
        margin: 1% auto;
        opacity: 0.9;
        padding: 0px;
        width: 250px;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;&lt;img src="http://placehold.it/60x60" alt="Your Brand Name"&gt;&lt;/a&gt;
          &lt;h1 class="nav-title"&gt;Liam Docherty's Digital Portfolio&lt;/h1&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;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"&gt;About Me &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#section3"&gt;Contact&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Units &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact-me"&gt;Contact Me&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
    &lt;/nav&gt;
  
  
    &lt;section id="section1" class="section1"&gt;
      &lt;div class="hero"&gt;
        &lt;div class="profile box"&gt;
          &lt;div class="shape"&gt;&lt;/div&gt;
          &lt;div class="shape2"&gt;
            &lt;p&gt;kjjjjjjjjjkjjjkkjkj&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  
      &lt;a href="#section2"&gt;&lt;i class="fa fa-angle-down" style="font-size:100px;"&gt;&lt;/i&gt;&lt;/a&gt;
  
    &lt;/section&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>