title: HTML Split SINGLE BACKGROUND IMAGE into two equal links (top and bottom)
body: <p>I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two. </p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Page 2&lt;/title&gt;
  
      &lt;link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet"&gt;
  
  &lt;/head&gt; 
  &lt;body&gt;
    &lt;div class="image"&gt;
    &lt;center&gt;&lt;img src="{% static 'picture.png' %}" alt="image" /&gt;&lt;/center&gt;
      &lt;a href="link1" style="top: 0%;"&gt;&lt;/a&gt;
      &lt;a href="link2" style="top: 50%;"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>