Trying to add Blured background image

[Sebiann]

Hello. Im trying to add a background image which is blurred.
I got a background image working nicely but if i add the blur it adds it on everything.
Any help appreciated.

Edit: (and while im writing: i also wanna make the image darker so i can actually read the text in the app)

body.theme-my-theme {
  /* The image used */
  background-image: url("/custom/image/background.jpg");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[bert010]

try to add this before your normal body definition eg:

body:before {
content: '';
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-filter: blur(10px);
background: url(https://www.slrlounge.com/wp-content/uploads/2020/06/best-landscape-photographers-to-follow-in-2020.jpg) no-repeat;
background-size: cover;
}

body.theme-my-theme {
--main-font-family: 'Roboto Mono', monospace!important;
--header-background-color: #f0f0f0;
--button-background-color: #f0f0f0;
--button-disabled-background-color: #404552;
--button-text-color: #737373;
--input-background-color: #ffffff;
--main-text-color: #333333;
--main-background-color: #f0f0f0;
--menu-background-color: #eee;
--more-accented-background-color: #fff;
--link-color:#2f80d0;
--link-style:italic;
--main-border-color:#e2e2e2;
--main-font-size: 0.8rem!important;

}

[Sebiann]

Thx this worked
Now all i need to find is a way to add like a black image which is half transparent over it.

[Sebiann]

I put the example here
https://github.com/Sebiann/miku-hatsune-trilium-theme