JDS JDS - 1 month ago 8
HTML Question

HTML: How to make two image button hyperlinks side-by-side take up full screen?

I want to have two images, left and right halves of the page, that when clicked, re-direct to a particular link.

When the user enters the webpage, I want them to see nothing but these two images (which are clickable), and I don't want it to be scrollable either, i.e. I just want it to fit on the single page.

Not very experienced with HTML - how to modify/rewrite the code below?

<a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>

<a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a>

Answer

Looking something like this

html,body{
  width:100%;
  height:100%;
  margin:0
}
div.container{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
  
}
.left, .right{
    width:50%;
    height:inherit;
    float:left
}
a{
  display:block;
  width:100%;
  height:inherit
}
.left{
  background:url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
  background-size:cover;
}
.right{
  background:url(https://pixabay.com/static/uploads/photo/2016/03/28/12/35/cat-1285634_960_720.png);
  background-size:cover;
}
<div class="container">
  <div class="left">
    <a href="www.google.com" ></a>
  </div>
  <div class="right">
      <a href="www.facebook.com"></a>
  </div>
</div>