title: HTML and CSS: using background image as a clickable link
body: <p>I'm trying to use a html and css trick to give the impression of using a background image as a clickable link following this <a href="http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/" rel="noreferrer">tutorial</a>. I can't get to work, however, due to two issues:</p>
  
  <p>1) The link is not filling the space of the background image</p>
  
  <p>2) The link will not move off the screen</p>
  
  <p>I'm using an html code integration block for a weebly website. I'm a beginner to html and CSS.</p>
  
  <pre><code>&lt;a href="website.net/link" title="photo" id=«photo»&gt;photo&lt;/a&gt;
  
  &lt;a class="photo"&gt;&lt;/a&gt;
  
  &lt;style type="text/css"&gt;
  
  .photo {
      background-image: url(myImageLink.jpg);
      background-size: 300px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;
      background-clip: border-box;
      transition: background-size 0.2s;
      transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
  
      display: block;
      width: 190px;
      height: 190px;
      text-decoration: none;
      cursor: pointer;
      overflow: hidden;
      text-indent: 100%;
      white-space:nowrap;
  }
  
  .photo:hover {
      background-size: 500px;
  }
  
  &lt;/style&gt;
  </code></pre>