Step 4: Customize background

Change the background

Head over to the left sidebar and click on content > _index.md to edit our homepage.

You’ll see a design section at the top of the homepage file:

design:
  background:
    image:
      filename: bg-hue.svg

To change the background image:

• drag-and-drop an image from our computer to the assets/media/ folder
  • if the name contains spaces, rename the filename to replace spaces with hyphens (-)
• update the background filename field in content/_index.md to the name of the image we uploaded

To remove the background:

• set the background filename to an empty text field: filename: ''

To remove the color-changing background effect:

• delete the layouts folder

Change the text color

Depending on whether you choose a light or dark background, you may want to update the site color theme.

Head over to the left sidebar and click on config/_default/params.yaml and set the color theme to light, dark, or system:

appearance:
  theme_default: light

For example, if you choose a dark background, you may want to update the color theme to dark so that the text is legible, appearing light colored.

Save changes

Then save file changes by clicking on the three bars in the top left and File > Save (or ctrl + s keyboard shortcut).