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?

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.

3

Thanks Maria. I will give this a try

4

Hi @Maria, we’ve given this a try but can’t seem to get it to work. We want to apply an image referenced by a URL as a background to the whole page. Our page custom code currently reads (referencing a test image only):

<style>
#nav, section, footer {
background:url(http://res.cloudinary.com/artancestry/image/upload/v1780769596/Tagsmart/42117_Wor_2bHBaiPi78D3f5.jpg);
background-size: cover;
background-position: center; }
</style>

Is the solution still viable? If so, v grateful if you could let us know what we’re doing wrong :slight_smile:

5

I know this thread is a bit old, but I’m curious if anyone has tried applying these CSS snippets on more complex Softr layouts. Did you run into any new challenges, or has it been smooth sailing? I’m thinking of using a video background across multiple blocks and wondering if adjustments are needed. Anyone want to share their experiences or insights?