如何在背景横幅上添加链接？

Question

How can I add link on the background banner that is displayed in the background of the whole page?

 .wrapper { width: 100%; display: inline-block; text-align: center; } .banner { background-position: 50% 0; background-repeat: no-repeat; } .banner { background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); background-repeat: repeat-y; } .wrapper.banner { background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); background-repeat: no-repeat; } .banner-link { position: absolute; width: 100%; display: block; margin: 0 auto; height: 200px; } .page-content { background-color: white; width: 300px; display: inline-block; } 

 <div class="banner"> <div class="wrapper banner"> <a href="#" class="banner-link"></a> <div class="page-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> 

Link should be on the background banner that is div “banner” and the height of the banner shouldn't be fixed.

If I put absolute div “banner-link” inside div “banner” i have to put fixed height and this is not working for me.

Can it be done with CSS or should I use Javascript?

Answer 1

You can set the height of the link to 100% and increase the z-index of the page-content div. This way the link will stay as a background:

    .wrapper {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.banner {
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.banner {
  background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg);
  background-repeat: repeat-y;
}

.wrapper.banner {
  background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png);
  background-repeat: no-repeat;
}

.banner-link {
  position: absolute;
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 100%;
}

.page-content {
  background-color: white;
  width: 300px;
  display: inline-block;
  z-index:1;
  position:relative;
}

http://codepen.io/anon/pen/ZpGpaa

Answer 2

You can use jQuery to bind a click event and do (with your selector rules) what you want. (This use to be a Javascript feature responsibility, CSS for style and animations basically)

Working Example:

 $(document).ready(function() { $('.banner > .wrapper').click(function() { console.log('you clicked me'); window.location = '#new-url'; }); }); 

 .wrapper { width: 100%; display: inline-block; text-align: center; } .banner { background-position: 50% 0; background-repeat: no-repeat; cursor: pointer; } .banner { background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); background-repeat: repeat-y; } .wrapper.banner { background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); background-repeat: no-repeat; } .banner-link { position: absolute; width: 100%; display: block; margin: 0 auto; height: 200px; } .page-content { background-color: white; width: 300px; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="banner"> <div class="wrapper banner" onclick="window.location = '#your-new-location'"> <a href="#" class="banner-link"></a> <div class="page-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> 

Answer 3

 $('.banner-link').css({height: $('.banner').height()}); 

 .wrapper { width: 100%; display: inline-block; text-align: center; } .banner { background-position: 50% 0; background-repeat: no-repeat; } .banner { background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg); background-repeat: repeat-y; } .wrapper.banner { background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png); background-repeat: no-repeat; } .banner-link { display:block; position: absolute; width: 100%; display: block; margin: 0 auto; } .page-content { background-color: white; width: 300px; display: inline-block; } 

 <div class="banner"> <div class="wrapper banner"> <a href="#" class="banner-link"></a> <div class="page-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="# ">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

  
 
  
  
 
   
 
    
.wrapper {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.banner {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg);
  background-repeat: repeat-y;
  height: 100%;
  width: 100%;
  position: absolute;
}

.wrapper.banner {
  background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png);
  background-repeat: no-repeat;
}

.banner-link {
  position: absolute;
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 200px;
  z-index: 0;
}

.banner-text {
  position: relative;
  left: 40%;
  width: 1px;
  z-index: 1;
}

.page-content {
  background-color: white;
  width: 300px;
  display: inline-block;
}
 
    
<div class="banner">
  <div class="wrapper banner">
    <a href="http://www.google.es" class="banner-link"></a>  
  </div>
</div>
<div class="banner-text">
    <div class="page-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

      in reprehenderit in sssss <a href="http://www.w3schools.com">Lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <a href="#">Lorem link</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sitamet, <a href="#">Lorem link</a>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Lorem link</a>Excepteur sint occaecat cupidatat non p`enter code here`roident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>