HTML and CSS: Using Background Image as a Clickable Link

HTML and CSS: using background image as a clickable link

Demo

You need a single <a> tag, style a background to it, give required href to it and make it display: block

html

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

css

.photo {
    background-image: url('http://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);

    display: block;
    width: 190px;
    height: 190px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space:nowrap;
}

.photo:hover {
    background-size: 500px;
}

Making background-image clickable

You can't make a background image clickable with HTML alone. It's a property of an element and not an element itself. Simply wrap the div in an anchor. This is permissible in HTML5 spec.

More info

Of course, you could simply style the anchor:

.some_image {
    display: block;
    width: 200px;
    height:100px; 
    background-image: url(../images/image.png);
}

<a class="some_image" href=""></a>

How to make a div that has background image clickable to another page in bootstrap

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>

Using background image as a link

You should wrap the div in the anchor tag

<a href="#">
   <div class="card card1">
       <h5>Cakes</h5>
   </div>
</a>

CSS - make background image a link

All you need to do to have a clickable image - is to wrap your div element(the one with background image) with anchor tag, like this:

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

Adding a clickable link to a background image slider

Put this code wrapped in <script></script>into (the head of) your page

const links = {
  slide1: "https://etractorimplements.com/product-category/flail-mowers/",
  slide2: "https://etractorimplements.com/product-category/wood-chippers/",
  slide3: "https://etractorimplements.com/product-category/rotary-tillers/",
  slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"
}; // list of links

$(function() {
  $(".carousel-inner").css("cursor","pointer"); // or add .carousel-inner { cursor: pointer; } to the end of your CSS file
  $(".carousel-inner").on("click tap touchstart", ".item", function() {
    const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))
    if (slide.length === 1) location = links[slide[0]];
  });
});

Example

const links = {
  slide1: "https://etractorimplements.com/product-category/flail-mowers/",
  slide2: "https://etractorimplements.com/product-category/wood-chippers/",
  slide3: "https://etractorimplements.com/product-category/rotary-tillers/",
  slide4: "https://etractorimplements.com/product-category/winter-equipments/snowplow/"
}

$(function() {
  $(".carousel-inner").css("cursor","pointer");
  $(".carousel-inner").on("click tap touchstart", ".item", function() {
    const slide = $(this).attr("class").split(/\s+/).filter(cls => cls.startsWith("slide"))
    if (slide.length === 1) location = links[slide[0]];
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<div id="first-slider">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
      <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
      <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item slide1" role="list">
        <div class="row">
          <div class="container">
            <div class="col-md-7 text-left my_res1">
              <h3 data-animation="animated fadeIn"> Ditch Flail Mower</h3>
              <h4 data-animation="animated fadeInUp"> Ideal for your small to mid-sized tractor providing maximum flexibility</h4>
            </div>
            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>
            <div class="col-md-5 text-right my_res2"></div>
          </div>
        </div>
      </div>
      <style>
        #first-slider .slide1 {
          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/flailmower.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center
        }
      </style>
      <div class="item slide2 active" role="list">
        <div class="row">
          <div class="container">
            <div class="col-md-7 text-left my_res1">
              <h3 data-animation="animated fadeIn"> Wood Chipper</h3>
              <h4 data-animation="animated fadeInUp"> Powerful & Reliable Easy to Use</h4>
            </div>
            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>
            <div class="col-md-5 text-right my_res2"></div>
          </div>
        </div>
      </div>
      <style>
        #first-slider .slide2 {
          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl2-compressor.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center
        }
      </style>
      <div class="item slide3" role="list">
        <div class="row">
          <div class="container">
            <div class="col-md-7 text-left my_res1">
              <h3 data-animation="animated fadeIn"> Rotary Tiller</h3>
              <h4 data-animation="animated fadeInUp"> To make your work easy, the right size to fit your tractor.</h4>
            </div>
            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>
            <div class="col-md-5 text-right my_res2"></div>
          </div>
        </div>
      </div>
      <style>
        #first-slider .slide3 {
          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/sl4-compressor.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center
        }
      </style>
      <div class="item slide4" role="list">
        <div class="row">
          <div class="container">
            <div class="col-md-7 text-left my_res1">
              <h3 data-animation="animated fadeIn"> Snow Plow</h3>
              <h4 data-animation="animated fadeInUp"> Innovative & reliable plow that removes snow even in the worst conditions</h4>
            </div>
            <a href="https://etractorimplements.com/product-category/flail-mowers/"></a>
            <div class="col-md-5 text-right my_res2"></div>
          </div>
        </div>
      </div>
      <style>
        #first-slider .slide4 {
          background-image: url(https://etractorimplements.com/wp-content/uploads/2017/10/snow-banner.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center
        }
      </style>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <i class="fa fa-angle-left"></i><span class="sr-only">Previous</span> </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <i class="fa fa-angle-right"></i><span class="sr-only">Next</span> </a>
  </div>
</div>

Add URL link in CSS Background Image?

Try wrapping the spans in an anchor tag and apply the background image to that.

HTML:

<div class="header">
    <a href="/">
        <span class="header-title">My gray sea design</span><br />
        <span class="header-title-two">A beautiful design</span>
    </a>
</div>

CSS:

.header {
    border-bottom:1px solid #eaeaea;
}

.header a {
    display: block;
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
}

Links not working because of background image

::after might be blocking the clicks, try adding pointer-events: none; here div::after {...}

div::after {
  pointer-events: none;
  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;

  top: 0;
  left: 0;
  content: "";
  display: block;
  position: fixed;
  background: url(brain.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  opacity: 0.1;

}

---

Related Topics