Off-Canvas/Off-Page Background Image

I'm trying to use a hook to place an image kind-of halfway off the page.

As you can see here:

https://don.anthvale.com/about/

Halfway down on the right-hand side there's a hammer and saw.

But for instance, on desktop depending on the height of the page, there's a gap below the site-info footer, and on mobile if the user scrolls to the right it shows the rest of the image off-page.

This is what I have so far:

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

<div class="hide-on-mobile" style="transform: rotate(-30deg); position: absolute; z-index: -1; right: -150px; top: 55%; opacity: .03; width: 800px;">
<img src="https://don.anthvale.com/wp-content/uploads/2020/06/hammer-and-saw-brown.svg" alt="cucumber">
</div>

And then I was playing around with some kind of body { overflow: hidden; } but I can't get anything to work right for me.

Thanks