How To Make A Div That Has Background Image Clickable To Another Page In Bootstrap
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>
Post a Comment for "How To Make A Div That Has Background Image Clickable To Another Page In Bootstrap"