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
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
      22 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