Responsive or Transparent background image

Question

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 fiddle

<div class=" network container-fluid">
<div class="row">
    <div class="container">
        <div class="col-md-6"></div>
        <div class="col-md-6">
             <h1> Lorem Ipsume</h1>

            <br>
            <br>
            <p>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</p>
        </div>
        <br>
    </div>
</div>

.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;
}

Answer 1

You can use a media query to change the opacity or remove the background when a certain height is reached. You can as media queries dependent on height / width / both, etc...

Fiddle - play with height of iframe by pulling the separator between the css box, and preview box up and down.

.network {
    position: relative;
    height: 50%;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.network::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://i.imgur.com/w5BnMSf.png) , #f6f8f8;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    content: '';
}

@media (max-height: 700px) { /** play with the numbers to find the right height **/
  .network::before {
    opacity: 0.5;
  }
}

@media (max-height: 500px) { /** play with the numbers to find the right height **/
  .network::before {
    display: none;
  }
}

Answer 2

I modified your HTML and CSS a bit and i think this is the result that you want:

HTML:

  <div class=" network container-fluid">
        <div class="row">
            <div class="container">
                <div class="col-xs-6 img pull-left"></div>
                <div class="col-xs-6 pull-left">
                  <h1> Lorem Ipsume</h1>
                <br>
                <br>

               <p>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</p>  
                </div>

                    <br style="clear:both;" />
        </div>


        </div>
    </div>

CSS:

.img {
    background: url(http://i.imgur.com/w5BnMSf.png);
    background-repeat: no-repeat;
    height: 500px;
    background-size: contain;
    background-position:50% 50%;
}
.network {
    background-color:#f6f8f8;
    height: auto;
    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;
}

Here's a solution in JsFiddle

Hope this helps :-)