How do you make the background image scroll between the widgets on the home page?

[spcanelon]

Hi there! 👋

I've received this question twice so I figured I would document an answer publicly!

🚀 If you end up incorporating a background image into your site, I'd love to see it! I hope you consider sharing a link of your site as a reply in this issue.

👩‍💻 If you'd like another example of how this is done I recommend Alison Hill's website which is where I found a lot of inspiration.

Happy website building!

---

The sections titled "Talks," "Posts & Publications," and "Contact" are blank widgets with a custom image as the background. Below is some context to make sense of that.

If you go into my content/home folder you'll see the markdown files that specify things about the different widgets being used on the home page, and what order they appear in.

For example, the "About Me" section (about.md) is the first section and has weight = 20.

# About widget.
widget = "about"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 20  # Order that this section will appear in.

title = "About me"

Note: The "Hero" widget technically would come first with weight = 10, but it's not active on my site).

The second section is "Experience" (experience.md) with weight = 30

# Experience widget.
widget = "experience"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 40  # Order that this section will appear.

title = "Experience"
subtitle = ""

And the third section is the "Talks" heading (pre-talks.md) with weight = 40 and the picture as a background. Here's how I specify that it's a "blank" widget and some other things:

widget = "blank"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true # Activate this widget? true/false
weight = 40  # Order that this section will appear.

title = "Talks"
subtitle = ""

Finally, I specify to use an image as the background under [design.background]:

[design.background]
.
.
.
  # Background image.
    image = "Lake_Pink.jpg"  # Name of image in `static/img/`.
    image_darken = 0.3  # Darken the image?

  # Text color (true=light or false=dark).
    text_color_light = true

I think the text might be centered by default when you choose to give the section 1 column in [design].

[design]
  # Choose how many columns the section has. Valid values: 1 or 2.
  columns = "1"