TeaCozy Project: Mission background image keeps disappearing

The background “Mission” image keeps disappearing when I resize the browser and I cannot work out why. If anybody would be willing to review my code and help me fix this issue, it would be greatly appreciated!

Hey there Emma Amelie
I may be able to help, but can you share some screenshots of the problem? I’m too lazy to copy the files on VSCode and start the local server. :slight_smile:

In a severe mood of procrastination, I copied your code in my local setup :smiley:.
Neither in Chrome nor in Safari, the background image in the mission container disappears on a browser window resize. When the browser window is larger than the natural image size, the image is repeated. When it is smaller, you just see the irrelevant parts of the image. So I would recommend setting the background-size to cover.
If the background image was visible before and not anymore on resize, I would suspect a collapse of the parent container. In such a case I would put a visual border around the parent element in order to find out, if the image is not displayed at all or if the parent’s height is 0. Also, take a look at the devtools to check if there is an error saying that the image can’t be loaded.

1 Like