How To Make A Div That Has Background Image Clickable To Another Page In Bootstrap

I want to make this image clickable to another Page. I've set image to div by css as code below.

Solution 1:

Have a try of this

Wrap the div in the anchor - this is allowed in newer HTML (alternatively make the anchor a block element and put the image as background on the anchor - see other answer by F Müller):

.image1 {
  background-image: url(https://images.unsplash.com/photo-1486611367184-17759508999c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80);
}

a {
  text-decoration: none;
  color: white;
}

<div class="row">
  <div class="col-lg-4 col-sm-4">
    <div class="img-thumbnail">
      <a href="https://google.com/search" class="badge badge-dark">
        <div class="image image1">
          Electronics
        </div>
      </a>
    </div>
  </div>
</div>

OR extend the click to the div using JavaScript if you have no other way

window.addEventListener("load",function() { // on page load
  document.addEventListener("click",function(e) { // change document to the closest static container
    let tgt = e.target; // what was clicked
    let badge = tgt.querySelector(".badge"); // anchor could be inside
    if (tgt.classList.contains("image") && tgt.contains(badge) || tgt.classList.contains(".badge")) { // or it could be the anchor
      location = badge.href+"?q="+badge.textContent; // use the anchor href
    }
  })
})

.image1 {
  cursor: pointer;
  background-image: url(https://images.unsplash.com/photo-1486611367184-17759508999c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80);
}

.image1 a {
  text-decoration: none;
  color: white;
}

<div class="row">
  <div class="col-lg-4 col-sm-4">
    <div class="img-thumbnail">
      <div class="image image1">
        <a href="https://google.com/search" class="badge badge-dark">Electronics</a>
      </div>
    </div>
  </div>
</div>

Solution 2:

All you need is an anchor tag <a> and you set the background-image on that tag. In this way you can also get rid of some of the markup (redundant).

You can use display: block to make the <a> behave like a <div>. In this case it will cover 100% of the available width and height of the parent element.

.image {
  display: block;
  height: 200px;
  background-image: url(https://images.unsplash.com/photo-1486611367184-17759508999c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80);
  color: wheat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}

.thumbnail {
  width: 200px;
  height: 50px;
}

Like this:
<div class="row">
  <div class="col-lg-4 col-sm-4">
    <div class="img-thumbnail">
      <a href="https://www.example.com" class="image">Electronics</a>
    </div>
  </div>
</div>

or even:

<div class="row">
  <div class="col-lg-4 col-sm-4">
    <a href="https://www.example.com" class="image thumbnail">Electronics</a>
  </div>
</div>

Solution 3:

You can add the URL to href element in a tag. you can set

.image1 {
  background-image: url(https://images.unsplash.com/photo-1486611367184-17759508999c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80);
}
.image1 a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: white;
}

<div class="row">

  <div class="col-lg-4 col-sm-4">

    <div class="img-thumbnail">

      <div class="image image1">
        <a href="https://stackoverflow.com/" class="badge badge-dark">Electronics</a>
      </div>

    </div>

  </div>

there can be many ways to achieve this depends on your need.as an example in case you plan to add more elements inside the div you can use javascript to achieve this.

You can add the onclick for JavaScript into the div.

#box {
    cursor: pointer;
    background-image: url(https://images.unsplash.com/photo-1486611367184-17759508999c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80);
    height:300px;
    width:100%;
    color:white;
    font-size:32px;
    text-shadow: 1px 1px #000;
}

<div onclick="location.href='https://stackoverflow.com/';" id="box">
The content of the div here
</div>