Want text that scrolls under background image

Using latest version of Sugarcube. I have a background image that is opaque around the edges and transparent in the center of the background image. How do I make it so text on the screen scrolls under the opaque portion of the background and not over it, like it does now.

Any ideas?


Hi there!
I would be helpful if we could see your current code!
You can use CNTR+E or the </> icon in the text editor to copy your code!

Background images are in the background, the text of a div will scroll in front of the div’s background…

You might try putting the image in the foreground/covering the entirety of the screen, and setting its pointer-events property to none to make it clickable through. I’ll test on my computer in a bit.

In your CSS:

#overlay {
  background-image: [put your background image URL here];
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;

In your passage:
@@#overlay;@@ or <div id="overlay"></div> (these are equivalent)

Note that the above is using background-image: radial-gradient(rgba(255, 255, 0, 0) 75%, white). If all your image is doing is a vignette, you might just use a radial-gradient.