How can I contain content within cover block as opposed to overflow hidden?

As hero I pull a query from a category and only one displays (The newest). This can be both portrait and landscape and I need the full frame to display as contained. Also I have title and author as links on top of this image which works well in cover block…

So is there any css that will do this until fix’ed as a permanent solution?

Any plans to add random function to cover. So that it pulls randomly from a category. Maybe on a timely basis. Fx once per week or month.

I have tried snippets in functions.php, that did not work….

thank you

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?

If i use header as it is, the image gets cropped, and if i use the css property the image is displayed but bringing white bars around. This is a serious problem on mobile phones, as on some screens not even 30% of the total image gets visible.

Is there any way to display the full image without causing white bars above and below.

My site is and at present i am NOT using that property, because it gives bad impression. In hope of help. Thanks in advance.

Is there a way to have “text contains” instead of just “equals” or “not equals”?

There is always a space between the image and the border of the screen, whatever the size and the proportions of the screen. It looks like a pourcentage because it s varying depending the screen size. How to remove those spaces, to “contain” the image within the screen ?