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;
}

<divclass="row"><divclass="col-lg-4 col-sm-4"><divclass="img-thumbnail"><ahref="https://google.com/search"class="badge badge-dark"><divclass="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 loaddocument.addEventListener("click",function(e) { // change document to the closest static containerlet tgt = e.target; // what was clickedlet badge = tgt.querySelector(".badge"); // anchor could be insideif (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);
}

.image1a {
  text-decoration: none;
  color: white;
}

<divclass="row"><divclass="col-lg-4 col-sm-4"><divclass="img-thumbnail"><divclass="image image1"><ahref="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:
<divclass="row"><divclass="col-lg-4 col-sm-4"><divclass="img-thumbnail"><ahref="https://www.example.com"class="image">Electronics</a></div></div></div>

or even:

<divclass="row"><divclass="col-lg-4 col-sm-4"><ahref="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);
}
.image1a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: white;
}

<divclass="row"><divclass="col-lg-4 col-sm-4"><divclass="img-thumbnail"><divclass="image image1"><ahref="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: 1px1px#000;
}

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