cssを使って要素の反応的な背景画像を設定するには？

Question

を<a>に設定するたびに、常にスタイルシートファイルに幅と高さを指定する必要があります。これはurlimageが応答しない作る、と私は解決策を試したとき、私は、このような background-size: cover; background-color: transparent;

またはクラスの行を使用して指定するCOLをかmax-heightと画像が消えmax-widthを使用するなど、別の質問でここに見つけました。ここで

全く反応しない私の現在のコードです：

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

との.cssファイルの

.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); 

} 

これが応答urlimages作り方？

Answer 1

は私が

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

https://fiddle.jshell.net/ywzwk1z0/

はまた background-size:contain;を追加し、それをより明確にするバイオリンを作っ