how to set responsive background-image of element using css?

Question

whenever I set the background-image for an <a> , it always requires to specify the width and height in the stylesheet file. which make the urlimage not responsive, and when I try the solutions I found here in another questions such as background-size: cover; background-color: transparent; background-size: cover; background-color: transparent;

or using class row and specify col or using max-height and max-width the image disappears.

Here is my current code which is not responsive at all:

<div class="container-fluid" style="position:absolute; bottom:50px;">
    <a class="urlImg" href="~/Home/Wall"></a>
</div>

and for the .css file

.urlImg {
 background-repeat:no-repeat;
 height:243px; 
 width:1022px;
 display:block; 
 background-image:url(../img/2.2.png);

} 

.urlImg:hover {
     background-image:url(../img/2.1.png);

} 

.urlImg:active {
     background-image:url(../img/2.3.png);

} 

.urlImg:visited {
     background-image:url(../img/2.2.png);

} 

how to make this urlimages responsive?

Answer 1

I made a fiddle to make it more clear
https://fiddle.jshell.net/ywzwk1z0/

.container-fluid{
  height:50%;
  width:50%;
}

Also added background-size:contain;