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