Every hero needs a cape. With everypage it's easy to add a background to your hero (and other) sections and we're going to show you how.
Here's a video going over what we talk about in this short article:
We're going to be starting with the blank "Pre-Launch" template. This tutorial works for all templates and in fact all sections so don't worry if you have another one. It should look something like this:
By default, all pages have the background color set from the theme. We won't be looking at this today but if you want to hear more about changing the theme, just let us know 🙂.
To add a background, you have to add a background key in the json of the section you want to change. First, we will set a single color as the background:
That's all it takes! Here's the json for it:
"background": {
"color": "#e5e5f5"
}
You can use a hex code, rgb or rgba. The rgba equivalent (which would allow transparency) would be:
"background": {
"color": "rgba(229, 229, 245, 1.0)"
}
Backgrounds can also have images. To do that, first you should upload an image using the media tab:
Then, copy the name of the image you uploaded as shown in the above screenshot. You should then paste this into the json like this:
The json for that is:
"background": {
"imageUrl": "<what you copied from above>"
}
As the field name implies, you could also use an image url you have directly from the internet. This will work but is not advised as your page will load slower and be less performant because we will optimise your images for you (especially on mobile!).