title: Responsive or Transparent background image
body: <p>I am creating a container with a background image behind. I have no problem in desktop or bigger sizes. However when the window resizes the text comes on the top of the image and the text becomes unreadable. Do you have a solution about this? Maybe change the opacity of the image in smaller sizes or completely remove the background image and use an img src instead? Here's a <a href="https://jsfiddle.net/DTcHh/10875/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div class=" network container-fluid"&gt;
  &lt;div class="row"&gt;
      &lt;div class="container"&gt;
          &lt;div class="col-md-6"&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;
               &lt;h1&gt; Lorem Ipsume&lt;/h1&gt;
  
              &lt;br&gt;
              &lt;br&gt;
              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;
          &lt;/div&gt;
          &lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.network {
      background: url(http://i.imgur.com/w5BnMSf.png), #f6f8f8;
      background-repeat: no-repeat;
      height: 50%;
      background-attachment: fixed;
      background-size: contain;
      width: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .network h1 {
      font-family:'Open Sans', arial, sans-serif;
      font-weight: 300;
      font-size: 49.4000015258789px;
      color: dimgray;
      padding-top: 40px;
  }
  .network p {
      font-family:'Open Sans', arial, sans-serif;
      font-weight: 300;
      font-size: 19.4000015258789px;
      color: dimgray;
      text-align: justify;
  }
  </code></pre>