Draft - fixing the background image in the live build

[lydiadunning]

For an example of how to fill this template out, see this Pull Request.

Description

A place to test solutions to the background image not acting as expected in the live build. This demo should show the same behavior.

Currently commented out the background image in the index.html root file.

Type of Changes

	Type
✓	:bug: Bug fix
	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

The background image does not appear, only the background image appears, and the background image flashes.

After

Testing Steps / QA Criteria

1. Load the demo and see whether the background displays correctly.
2. Press Shift + refresh(↻) on Mac or Crtl + refresh(↻) on Windows to see if a hard refresh of the page causes the error to occur.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 0f5de4f):

https://tcl-65-smart-shopping-list--pr50-fix-build-issues-1yqmf875.web.app

_{(expires Wed, 18 Oct 2023 21:32:28 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: a91b8fb0f37677e20d8afa3e8ea496251536f9b8}

[shannonerhea]

excellent idea this PR I followed your steps and this is what we are getting. I did the hard reload as you suggested with shift and reload and also included a refresh as well. I am at a loss tbh

https://github.com/the-collab-lab/tcl-65-smart-shopping-list/assets/86745260/ea0d24d9-5a91-4f95-a680-ef016b6744e4

[lydiadunning]

I think the images are showing up in the background now, but sometimes only the background appears, along with an error message - Minified React error #299 - createRoot(...): Target container is not a DOM element.

The createRoot target is this: document.getElementById('root') The div with the id 'root' is right there in the DOM.

I think we may have had two bugs, one where images didn't show, one where the react app doesn't load.

[shannonerhea]

Hi Team! @lydiadunning This is where we are at when we run our app local from this branch I made changes and got the flashing to stop (pretty much lol) or be less noticeable and there are no longer errors in the console. I think we should merge this code with main and start figuring out why our Demo link in the project brief isnt working. Let me know what ideas you have for next steps..

https://github.com/the-collab-lab/tcl-65-smart-shopping-list/assets/86745260/3dde5407-4e8b-4d62-88c9-10b5435d998d