Forum Discussion

olaola's avatar
olaola
Community Member
3 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 b...
e-learning development
rise 360
PhilFoss's avatar
PhilFoss
Community Member
3 months ago

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
2 months ago

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
    2 months ago

    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?

    • ralli's avatar
      ralli
      Community Member
      2 months ago

      I do have it across three blocks but it still 'jumps' even when it is just on one block. 

       

      • PhilFoss's avatar
        PhilFoss
        Community Member
        26 days ago

        How annoying! I just did a screen recording showing a Microlearning course, indeed it has a very different template and the code updated for Microlearning looks like this, I'm hooking onto the purple color (in recording) to replace with my image, and the 'extra' div becomes transparent. It's very strange, I don't know why microlearning is using multiple elements to style the background, and using an image via Rise's native styling adds weird extra spacing to my blocks! I'll update this with the video recording, currently uploading.

        #innerApp div[style*="rgb(120, 55, 168)"] + div {
  background-image: url(myimage.jpg);
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-color:#17520e;
}

#innerApp div[style*="rgb(120, 55, 168)"].bg--type-color {
    background-color:transparent !important;
    box-shadow: none !important;
}

         

Related Content