#media image fails to load on reduced screen - html

Question

I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
HTML:
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resources\images\brejosHouse.jpg">
<div class="jumbospan">
<h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
CSS:
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
#media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
#media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}