How to get the background to fill the page and show entire image?

  • Resolved futureisfiction

    (@futureisfiction)


    11 months, 3 weeks ago

    Hi, First: I have a paid account but the only support I see on your home page is for bug reports. Hope this is the best place to post.

    I’m trying to create a page with multiple animations over a background image, that move as you scroll down the page. So the width would be 100% of the image, and you see the rest of the image as you scroll down the page.

    However, I am having so much trouble just getting the background right that I have removed all the animations until I can get the background positioned properly.

    I need the bottom of the image to show so that it’s clearly a book. Hence I have the image positioned 100% from the top (with the white dot you can grab at the very bottom of the the thumb where you choose position).

    I’ve created a Greenshift container block and set the background to my background image. The only other blocks are a few spacers, just so the container isn’t empty. Here are the failed steps I’ve taken.

    1. Width 100% sets the width correctly, but crops the rest of the image (same with Initial, Cover or Auto). However, if I set it to Contain, it contains the entire image above the fold, no scrolling.
    2. From there I tried adding height, width still set to 100%.
      • Height 100% does nothing, still cropping the image.
      • Setting the height to 460vh is the closest I’ve gotten, but this still crops the sides of the image, even with width at 100% or vw. If I set the view-height any higher than this, it creates empty space at the top or bottom of the block.
    3. I also tried setting the background to contain. I can get this looking perfect on my screen with 100vw and 200vh, but when I resize the screen it creates a big gap of empty space (which I don’t understand because I thought using view height was supposed to be adaptive).

    I’m so frustrated at this point, going in circles for weeks so I finally decided to write in. Any idea what I am doing wrong here or what I might try next?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wpsoul

    (@wpsoul)

    Hi, hard to understand what you need, but I think you need to show whole image in background. For this, there is Background size option and you need to set it as “Cover”

    Thread Starter futureisfiction

    (@futureisfiction)

    Sorry for delay; I thought this was via email and couldn’t remember that I posted it here.

    Yes, I tried setting it to cover but there is a gap at the top that varies on different devices. Even if I get it just right for my screen, it will have a gap on other screens.

    Where in the settings for the container block’s background do I set the size?

    The only option I see in Container > Background > Settings gear, but setting this to the 1980px didn’t work.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.