Background image with translucency css snippet

Share & showcase
, ,
1

Found out this bit of CSS that allows you:

  1. put in an image to be your background
  2. makes the body transparent so you can see the image, but also
  3. keep the workspace (your main typing area) opaque enough to where you can still see what you’re typing.

(not sure if this has been posted before! But thought it was cool and wanted to share :slightly_smiling_face: )

body {
  background-image: url(https://i.imgur.com/eIk2VB4.png); /* replace the URL(**this part**)for your own image */
  background-size: cover;
  background-repeat: no-repeat;
}

/*Adjust the value *.7* until desired opacity*/
.mod-root .workspace-tab-container .workspace-leaf-content {
    --en-opacity: .7;
}

Here’s an example from my vault: https://imgur.com/MGFF8Gq

2

Not able to edit: I’ve tested this with the default and Encore settings and it only worked with Encore