Width and Height 100% doesn't work on pop up image

Question

I have a contact me button, however, whenever someone hovers over the button, i want a full screen image background to appear. However, this image isn't full screen.

a {
  text-decoration: none;
  color: white;
  /*Let's Chat colour*/
}

.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 510px;
  text-align: center;
  font-size: 25px;
  text-color: white;
  left: 30%;
  z-index: 75;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}

.Oval:hover {
  position: relative;
}

.Oval:hover:after {
  content: url(Lightning1.JPG);
  display: block;
  position: absolute;
  center: 100%;
  top: -510px;
  opacity: 0.5;
  z-index: -10;
  height: 100%;
  width: 100%;
}

<div class="Oval"><a href="mailto:">Let's Chat</a></div>

Answer 1

You need to add pointer-events: none;+z-index: -1; property on .Oval:hover:after something like below snippet.

I hope below snippet will help you lot.

a {
  text-decoration: none;
  color: white;
}
.Oval {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  top: 100px;
  text-align: center;
  font-size: 25px;
  color: white;
  left: 50%;
  margin-left: -70px;
  background-color: orange;
  width: 140px;
  height: auto;
  background: #162129;
  border-radius: 40px;
  padding: 0px;
  text-decoration: none;
}
.Oval:hover:after {
  content:'';
  background: url(https://i.imgur.com/QgfTfOU.jpg);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

<div class="Oval"><a href="mailto:">Let's Chat</a></div>