Forum Discussion
Same background under multiple blocks in Rise
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?
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.
