https://github.com/rodneylab/sveltekit-nextgen-background

SvelteKit demo code for adding a NextGen background image with fallback to a site page.
https://github.com/rodneylab/sveltekit-nextgen-background

nextgen svelte sveltekit webp

Last synced: 2 months ago
JSON representation

SvelteKit demo code for adding a NextGen background image with fallback to a site page.

• Host: GitHub
• URL: https://github.com/rodneylab/sveltekit-nextgen-background
• Owner: rodneylab
• License: bsd-3-clause
• Created: 2021-08-27T10:56:57.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2025-03-19T08:42:30.000Z (over 1 year ago)
• Last Synced: 2025-06-10T08:39:52.419Z (about 1 year ago)
• Topics: nextgen, svelte, sveltekit, webp
• Language: CSS
• Homepage:
• Size: 2.45 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

          




  

    

  





  SvelteKit NextGen Background Image



[![Netlify Status](https://api.netlify.com/api/v1/badges/a0dd75d1-108f-4852-9bef-3456b5476243/deploy-status)](https://app.netlify.com/sites/eloquent-beaver-f13d7d/deploys)

# sveltekit-nextgen-background

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/sveltekit-nextgen-background)

SvelteKit demo code for adding a NextGen background image to a site page with a JPEG or PNG fallback for older browsers.

See video explaining how add a WebP background image in SvelteKit. Drop any questions you have into a comment on that page.

## Building and previewing the site

If you're seeing this, you've probably already done this step. Congrats!

```bash

git clone https://github.com/rodneylab/sveltekit-nextgen-background.git my-new-mdsvex-blog

cd sveltekit-nextgen-background

pnpm install # or npm install

pnpm run dev

```

## Building

```bash

pnpm run build

```

> You can preview the built app with `pnpm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

Feel free to jump into the [Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).