Как добавить ссылку на фоновое изображение jumbtron?

Question

У меня есть жумбротон с фоновым изображением.Я пытаюсь добавить ссылку, которая направляет на другую страницу.В основном, когда вы нажимаете на изображение, оно перенаправляет на другую страницу.

Я попытался добавить тег изображения и затем добавить к нему src, однако он добавляет другое изображение поверх изображения, которое у меня уже есть в фоновом режиме.

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
    <div class="container">
        <a href="fall2018.html">
        </a>
    </div>
</div>

Answer 1

Вы можете просто обернуть контейнер в <a> -Tag или вы можете расположить <a> - absolute следующим образом:

.jumbotron-fall{
  ...
  background-size: 700px 400px;
  background-position: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  position: relative; // <-- IMPORTANT LINE
}

a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Answer 2

Вы можете просто обернуть тег jumbotron в ссылку.

.jumbotron-fall{
    margin-top: 20px;
    background-image: url("/Users/admin/Documents/Nas/EAN x Twin Cousin tm.jpg");
    background-size: 700px 400px;
    background-position: center;
}

<a href="fall2018.html">
    <div class="jumbotron jumbotron-fluid jumbotron-fall text-center row no-gutters">
        <div class="container">
            ...
        </div>
    </div>
</a>