How do I change the background image on my widget landing page?

The following explains how to change the background image on a widget landing page, similar to https://textryan.com

To create a widget landing page, please follow the original tutorial here.

To change the background image, please follow the steps below and leave a message in our discord group if you get stuck anywhere!

1. Open your repository on GitHub and navigate to this page:

Click “upload files” and upload the image you want to use as the background image. Make sure it’s a dark image and the dimensions should be roughly (1280×720) like this one from Ryan's widget page:

https://textryan.com/ryan_leslie_private_jet_ny_post_by_lee_williams_.jpg

2. Click on the index.html file and press the edit pencil button on the top right. You should now be in edit mode.

3. Around line 85 you’ll find this:

.page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Replace this code with the following:

.page-center {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     background-image: url("YOUR_IMAGE_NAME.jpg");
     background-repeat: no-repeat;
     background-position: top center;
     background-size: cover;
}

Replace YOUR_IMAGE_NAME.jpg with the file name of the image you uploaded, e.g. image.png or image.jpg.

4. Scroll all the way down and “Commit Changes”.

That should be all. After a few moments the image should appear. If it doesn’t, try incognito mode in any browser or clean the cache, then reload.