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

whenever I set the background-imagefor 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;

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?

Answers 1

Related Articles