Page 1 of 1

Adjust BackgroundImage

Posted: 26 Sep 2024, 06:15
by grobkorn
Hi,
For my gallery, I use individual background images for each folder. 

Unfortunately, this makes the thumbnail view very cluttered. 
However, if you darken the background images significantly, it works very well. 

Until now, I have always uploaded and fitted specially edited background images.
But there must also be a way to automatically darken a background image via CSS or something similar.

Can someone perhaps help me with this?


Many thanks

Re: Adjust BackgroundImage

Posted: 26 Sep 2024, 11:37
by mjau-mjau
Yes, and that's why background images aren't generally used for page backgrounds, because they often clutter the layout, unless the background images are subtle. There isn't actually any CSS option like "background-opacity". There are some tricks, but I'm not sure it's worth the hassle.

In this example, they are using a normal <img> tag with absolute or fixed position to simulate a background image. They can then assign a CSS opacity to the element. If you were going to use this option, you would need to assign background images from page custom CSS, instead of using X3's background image plugin. This seems very clumsy.
https://www.digitalocean.com/community/ ... es-opacity

This trick I like more. With some combinations of CSS background-color and background-blend-mode, you can soften the image by blending it with a color. It does require some custom CSS, but it would work with the X3 background plugin. Still a bit inconvenient, as it might be tricky to assign values that suit all your background images.
https://stackoverflow.com/questions/126 ... ge-opacity

Some similar solution as above but using linear-gradient in combination with the background image.
https://stackoverflow.com/questions/689 ... ge-opacity