Html CSS-使背景图像成为链接

我已经在一个div中放置了一个背景图像，但希望它是指向另一个页面的活动链接，并且当鼠标悬停在上面时也可能亮起。这里是HTML和CSS，任何帮助都将不胜感激！谢谢

 <div class="col-sm-4 img1"><a href="football.html">Football</a></div>



  .img1 {
    background-image: url(https://....);
    background-repeat: no-repeat;
    background-size: cover;

---

您需要一个带有CSS的

锚定标记

<a class="photo" href="website.net/link"></a>

要获得一个可点击的图像，您只需使用锚定标记将div元素（带有背景图像的元素）包装起来，如下所示：

<a href="football.html"><div class="col-sm-4 img1">Football</div></a>


您想在用户单击图像的任何位置转到football.html，还是希望他们单击football一词时转到football.html，如果他们单击图像上的其他位置时转到其他位置？（另外，img2是否应该是img1？）如果他们单击列中的任意位置、单词football或背景图像上的任意位置。我不希望背景图像的尺寸发生任何变化，只希望它是可点击的。你是使用引导还是。。。？也许您可以将工作代码放在一个代码段中。是的，使用引导。我将立即编辑帖子谢谢，但我不想更改图像的尺寸，只想使其成为一个可单击的链接谢谢，但这会推送下面页面上的其他列，因此顶行现在只有一列。尝试将此类“col-sm-4”添加到锚元素，因为它现在已成为父元素。它应该保持你的风格和布局看起来一样。
<a href="football.html"><div class="col-sm-4 img1">Football</div></a>