Forum Discussion

olaola's avatar
olaola
Community Member
2 months ago

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.

    • olaola's avatar
      olaola
      Community Member

      SamHill Thanks for your response! I use this option a lot when building websites, and I really miss it in Rise. And a parallax effect while scrolling through the course would be absolutely mind-blowing! 😊

      PhilFoss maybe you have some ideas on this?

  • PhilFoss's avatar
    PhilFoss
    Community Member

    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; 
    }

     

     

    • ralli's avatar
      ralli
      Community Member

      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?

      • PhilFoss's avatar
        PhilFoss
        Community Member

        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?

  • PhilFoss's avatar
    PhilFoss
    Community Member

    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.

     

    • olaola's avatar
      olaola
      Community Member

      This is exactly what I needed, Phil, you're great! You’ve inspired me to dive deeper into CSS. Thanks a lot!