Forum Discussion

olaola's avatar
olaola
Community Member
31 days 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.

  • 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!

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

     

     

  • 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?