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.
13 Replies
Hi Ola, indeed that should work fine on those two separate elements- one has the background f9f9f9 and the other has f7f7f7. I would double check with your browser debugger to make sure those are indeed the color codes you see attached to those blocks. And then make sure your images are located alongside your css file.
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!
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; }I just spent an hour trying to figure out why there's still a background showing under my graphic (in my case, light gray – and my graphic only had a few pastel shapes on a transparent background). Turns out the background needs to be solid ;) Just a little tip :D
ah yes the 'overlay' which is transparent gray. I assume you turned it off or to 0%. The overlay is usually helpful as it makes text on top of a background image more readable, but it dulls the colors in your image underneath, especially noticeable if your image is mostly white.
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?
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.
