How to remove a background URL for mobile devices - html

Question

So I am placing a background image and then using bootstrap columns to apply text over the image.
This works fantastic on desktop but because of responsive design, the dark text sometimes goes behind dark parts of the image.
How do I remove the background URL when on mobile so only the text shows?
I know it would involve a media query but I am not sure how to hide the background image.
<div class="clearfix" style="background:transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png)no-repeat center center /cover;">
<div class="col-md-6"><br /></div>
<div class="col-md-6"><br />
<div id="global" style="text-align:left;"><br />
<p style="font-size:1.2em;">Now available in popular Loan Origination Systems</p>
<ul>
<li>Performs an instant check while the loan is being processed</li>
<li>Corrects Validity and Quality Errors at point-of-contact</li>
<li>Obtains census tract data with just one click</li>
</ul><br /></div>
</div>

Answer 1

You can easily do it with the help of media queries, but the way you have assigned the style, i.e. inline css is harder (quiet impossible in most of the case) to remove later by pure css. So, at first assign the style to that div externally, like this:
#content {
background: transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png) no-repeat center center /cover;
}
And, then use media queries like this (Change the max-width accordingly):
#media only screen and (max-width: 600px) {
#content {
background: none;
}
}
So, the full code goes like this:
#content {
background: transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png) no-repeat center center /cover;
}
#media only screen and (max-width: 600px) {
#content {
background: none;
}
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="clearfix" id="content">
<div class="col-md-6"><br /></div>
<div class="col-md-6"><br />
<div id="global" style="text-align:left;"><br />
<p style="font-size:1.2em;">Now available in popular Loan Origination Systems</p>
<ul>
<li>Performs an instant check while the loan is being processed</li>
<li>Corrects Validity and Quality Errors at point-of-contact</li>
<li>Obtains census tract data with just one click</li>
</ul><br /></div>
</div>
</div>
And here's the jsfiddle: http://jsfiddle.net/ruz95mef/9/

Answer 2

As Brian said, you can use a css media query to remove the background url for screens smaller than a certain size.
.clearfix {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
.clearfix {
background-image:none;
}
}