Overwrite image from css - html

Question

I need to change an html image under 500 px resolution.
I have three images as you can see in the code snippet, but under 500 px resolution I need only one image.
I made the media query, all the css code I have there. I've tried to put the image for mobile in a different container which is set the
display: none
at beginning. And when I'm in the media query
#media all and (max-width: 500px){..}
I set it the
display : inline
But it just won't work. It displays nothing.
I've tried to set for the
#experiential_2_img{
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
but it just displays the image that is set for desktop, too.
Can you advise how can I resolve this?
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
.experiental-container-mobile { display: inline;}
/*#experiential_2_img {
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
}*/
<div class="home_thirdrow">
<div class="experiental-header">
<h3>Experiential</h3>
</div>
<div class="experiental-container">
<img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg"
alt="Amanda_Phillies">
</div>
<div class="experiental-container">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container-mobile" style="display: none; ">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container">
<img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="insurance_fraud">
</div>
</div>

Answer 1

On these days it's always better to develope your site with mobile-stylesheet and extending this for desktop.
Reason:
Desktop-View on Moble :puke:
Mobile-View on Desktop :ok:
#media screen and (min-width: 768px) {
#experiential_1_img {
display: inline;
}
#experiential_3_img{
display: inline;
}
#experiential_2_img {
display: inline;
}
.experiental-container-mobile { display: none;}
}
.experiental-container-mobile { display: inline;}
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}

Answer 2

I do not know how you have the race of the files, but it has looked that this is correct the link of your css file to the project.
It is possible that in the path of background-image it is necessary to go back in the previous folder and then enter in images.
Example:
background: url ('../ images / experiential-insurance_fraud.jpg'); . The two points to move back a directory.