Clickable jumbotron background image

Question

I'm using a jumbotron background image,i want the image clickable. when i made a click on image it should redirect to another page.How can i do this?

<div class="jumbotron">

</div>

.jumbotron{
background:url(../images/jumb.jpg) no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height:400px;
}

possible duplicate of http://stackoverflow.com/questions/27941876/how-to-redirect-to-another-page-using-angular-js, http://stackoverflow.com/questions/18875467/redirect-to-new-page-in-angularjs-using-location — Narendra CM, Feb 26 '16 at 07:37

score 1 · Answer 1 · answered Feb 26 '16 at 07:38

Try this,

.jumbotron{
background:url('../images/jumb.jpg') no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height:400px;
}

<a href="http://google.com"><div  class="jumbotron">
</div></a>

score 0 · Answer 2 · answered Feb 26 '16 at 07:44

You can simply wrap your jumbotron inside an anchor tag and give a definite path to the href attribute of that anchor tag. Rest of the code is perfect as it is. Like so

<a href="http://www.google.com" target="_blank">
  <div class="jumbotron">

  </div>
</a>

The optional attribute target="_blank" opens the link in a new tab instead of the same. Just remove it if not needed.

NOTE: The http:// protocols are important here or otherwise it will redirect to that URL say www.google.com inside your current project directory.

Clickable jumbotron background image

2 Answers2