Forum Discussion
Same background under multiple blocks in Rise
Hey community! I have a question. Is it possible to add a separate background under multiple blocks in Rise? I'd like to add a single graphic that would cover a paragraph, a bullet list, and a tabs block.
Hi olaola I don't think this is possible. Each block has individual properties that you can set, but there is not an option to group a number of blocks and share properties between them at this level.
Even to try and do this with custom CSS would not be easy, as there would not be an HTML element that is wrapping around a number of blocks you would like to behave as a common group. Therefore it cannot be targeted with CSS.
I think that would be an excellent suggestion though. I think a feature like this would be well received and used frequently by designers.
Of course its possible! I did a screen recording showing how you can create a theme component and let two or more blocks 'share' a common background. In this example I have a text block above a numbered list, and they share the dark gradient svg image.
The key to this is using background-attachment:fixed in the CSS. Here's the CSS I ended up with:
div[style*="--color-background: #1d1d1d"] { background-image: url(darkbg-1e.svg); background-attachment: fixed; }This is fantastic! I tried it, but I have one question. When I have used it in a microlearning module, the image is first rendered on the screen as separate images per block, and when I scroll, it 'jumps' into place. Do you know what would cause that, or do you have a fix for it?
hmm I haven't tried this in Microlearning yet, can you confirm you've got two blocks that you've connected/joined to display together at once?
This background image gives a better view of how the 'fixed' background looks as scrolling, the paragraph/heading block is separate from the numbered list block, but they appear connected.
This is exactly what I needed, Phil, you're great! You’ve inspired me to dive deeper into CSS. Thanks a lot!
