[Resolved] Off-Canvas/Off-Page Background Image

Home Forums Support Off-Canvas/Off-Page Background Image

Viewing 1 post (of 1 total)
  • Author
  • #1314487

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

    As you can see here:


    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">

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


Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.