fix: extra whitespace on landing page

[iDarkLightning]

✅ Checklist

• I have followed every step in the contributing guide (updated 2022-10-06).
• The PR title follows the convention we established conventional-commit
• I performed a functional test on my final commit

---

Changelog

Display the background pattern via a pseudo-element bg-image instead of an image tag. Fixes unnecessary whitespace on specific screen sizes

Screenshots

Current:

Changed:

💯

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2e04821

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
create-t3-app	✅ Ready (Inspect)	Visit Preview	Nov 23, 2022 at 0:14AM (UTC)

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	100
🟢 Accessibility	100
🟢 Best practices	100
🟠 SEO	86
🟠 PWA	54

Lighthouse ran on https://create-t3-app-git-fork-idarklightning-next-t3-oss.vercel.app/

[c-ehrlich]

I'm not seeing the background at all on the test deployment. But your screenshot of the fix has it. Could you see what's the difference between between your local environment and the deployment?

vs

[iDarkLightning]

Weird, it seems to be trying to find the image on the path /assets/images/background-image.svg on the preview deployment. That's giving a 404 which results in the image not being shown. Locally, it works fine and just targets images/background-image.svg.

Not sure why this is happening, do you know if this is something to do with the preview deployment system here? I've never faced this issue on vercel before

[iDarkLightning]

...would love an explanation on why that makes a difference but it seems to be working now

[c-ehrlich]

...would love an explanation on why that makes a difference but it seems to be working now

I believe this might be because images are served differently depending on environment - in staging we build the static site, on your computer it's coming from the development server.

Could check this theory by reverting to the "broken" version, and building / starting the static site locally.

[c-ehrlich]

Looks good, thanks for the contribution :)