How does Softr.io have a background element that spans several blocks?

Ask the community
1

I want to create a background that will pass behind multiple blocks. It seems that Softr.io is doing that with the purple background at the top of the page. How does that work?

1 Like
2

Hi @lesbrown you can use this code to apply gradient background color or image to the whole page by making necessary adjustments and adding codes to Page Settings>Custom Code>Header section

<style>
#nav, section, footer {
	background: linear-gradient(90deg, rgba(132,127,221,1) 0%, rgba(166,166,255,1) 35%, rgba(0,212,255,1) 100%)!important;
}
</style>

this one for the header

<style> #home-header3 header { background: rgb(2, 0, 36); background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); }
</style>

replace home-header3 with your own header id/name

and this one for adding image instead of background color

<style>
#YOUR_BLOCK_ID> section {
    background: url(YOUR_IMAGE_URL);
    background-size: cover;
    background-position: center;
}
</style>

you can remove #YOUR_BLOCK_ID> from the code and it will be applied to the whole page or you can replace YOUR_BLOCK_ID with the block name/id you wish to apply it to.

1 Like
3

Thanks Maria. I will give this a try

1 Like