I’ve got a page that uses an image as a background, which covers the full height and width of the page. Although I’m using Tailwind, the CSS for the image is basically:
background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; position: absolute; top: 0; width: 100%;
That works fine. Until one of the elements on the page extends beyond my viewheight, which usually occurs when a toggle is switched on. CSS doesn’t seem to recognize that the height of the page has no changed, so it doesn’t update the size of the image. It simply ends at the point where the bottom of the page used to be, before the extending element lengthened the page.
Obviously different from my webpage, but here’s a codesandbox demonstrating essentially the same problem.