1

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;
}
user5945554
  • 51
  • 1
  • 3
  • 8
  • 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

2 Answers2

1

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>
Shankar Gurav
  • 1,057
  • 9
  • 17
0

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.

Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44