Fixed position background image will not align right

You can set background-position to set the position of the background image:

.overlay {
  height: 141px;
  width: 100px;
  background-position: 90% 10%;
}

The first value is percentage from the left, where 0% is all the way at the left and 100% is all the way at the right, and the second value is percentage from the top, where 0% is all the way at the top and 100% is all the way at the bottom.

I also went ahead and adjusted the size of the overlay to match the size of the image. The way you had it was making it impossible to click on anything on the page because the overlay “blocked” the links. This way, the overlay only “blocks” the part of the page it’s currently covering.

Actually, I just thought of a better idea, but it would only work if you took my advice to change the height and width of the overlay. If you do that, you could then set the position of the overlay using top and right:

.overlay {
  top: 100px;
  right: 50px;
  height: 141px;
  width: 100px;
}

Stephencottontail, thank you so much! I tried the second solution and it worked perfectly. Thank you for also pointing out my error of making the whole site non-clickable! I thought I would be up all night trying to figure this out. Thanks again for your help. ??