There are 5 types of background you can set on a section:
"color"
This can be set using a hex code, rgb or rgba.
e.g. "color": "#BF4342"
"linearGradient"
e.g. "linearGradient": "#e66465, #9198e5"
(see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)"radialGradient"
e.g. "radialGradient": "#e66465, #9198e5"
(see https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient)"imageUrl"
e.g. "imageUrl": "[<https://images.unsplash.com/photo-1514477917009-389c76a86b68>](<https://images.unsplash.com/photo-1514477917009-389c76a86b68>)"
"patternImageUrl"
e.g. "patternImageUrl": "[<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>](<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>)"
Additionally backgrounds can be layered on top of each other to create effects.
"background": {
"layers": [
{
"imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
},
{
"patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/stacked_circles.png>"
},
{
"color": "rgba(255, 0, 0, 0.4)"
}
]
}
}
Paste this json in the editor (or canvas) to see some cool backgrounds in action:
{
"name": "Backgrounds",
"description": "An example site with different types of background"
"company": "Kiba Labs",
"sections": [
{
"type": "hero-simple-1",
"titleText": "Solid color",
"background": {
"color": "#BF4342"
}
},
{
"type": "hero-simple-1",
"titleText": "Linear Gradient",
"background": {
"linearGradient": "#e66465, #9198e5"
}
},
{
"type": "hero-simple-1",
"titleText": "Radial Gradient",
"background": {
"radialGradient": "#e66465, #9198e5"
}
},
{
"type": "hero-simple-1",
"titleText": "Image",
"background": {
"imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
}
},
{
"type": "hero-simple-1",
"titleText": "Pattern",
"background": {
"patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/watercolor.png>"
}
},
{
"type": "hero-simple-1",
"titleText": "Stacked",
"background": {
"layers": [
{
"imageUrl": "<https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1261&q=80>"
},
{
"patternImageUrl": "<https://www.toptal.com/designers/subtlepatterns/patterns/stacked_circles.png>"
},
{
"color": "rgba(255, 0, 0, 0.4)"
}
]
}
}
],
}
Good resources for backgrounds: