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?
Thanks.
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.
