How to change backround picture opacity and blur?

[cochize1 41]

I know that in previous server version (4.6) I had a bit of script, probably added to the bottom of index.html (but not sure) that changed the blur and/or opacity of a background picture. I remember it was somehow relevant to modify the file itself as the css code was "working" with a bit of latancy so you could see the original unblurred image for a split of a second when navigating the page. Anyone knows if there is there any change to that code with the newest server version?

[visproduction 123]

Ch,

I assume you are talking about background on media pages.  I just remove the .class in my custom.css.  You could adjust it instead to your preference.
 

.itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop {
    display: none;
}

 

[cochize1 41]

No, I am referring to all backdrops at all pages. With modifying index.html with this scriptt below you could adjust blur and opacity. The advantage of modyfying the file instead of using css is that the code worked BEFORE loading the page. If you use css first the picture loads unblured and that adjust in a a second or so. Here's the code:

<script>
	                               var observer = new MutationObserver(function(mutations) {
                                    try {
                                        //A video is playing don't blur anything
                                        var backgroundContainer = document.querySelector('.backgroundContainer');
                                        if (document.querySelector('.videoPlayerContainer') || backgroundContainer.classList.contains('backgroundContainer-transparent')) {
                                            backgroundContainer.style.backdropFilter = "saturate(1) blur(0px)";
                                            backgroundContainer.style.backgroundColor = "rgba(0,0,0,.84)";
                                            return;
                                        }
                                        //Remove blur - DOM has #itemDetails which are not hidden - There are more then one instance of #itemDetails
                                        if (document.querySelector('#itemDetailPage')) {
                                            //All the #itemDetails Pages
                                            var detailPages = document.querySelectorAll("#itemDetailPage");
                                            //Only hidden #itemDetails pages
                                            var results = document.querySelectorAll('#itemDetailPage.hide');
                                            //hidden pages minus all the pages should be zero - unless we are viewing one the  it would be -1
                                            if ((results.length - detailPages.length) >= 0) {
                                                backgroundContainer.style.backdropFilter = "saturate(0.7) blur(0em)";
                                                backgroundContainer.style.backgroundColor = "transparent";


                                                return;
                                            } else {
                                                backgroundContainer.style.backdropFilter = "saturate(1) blur(0px)";
                                                backgroundContainer.style.backgroundColor = "rgba(0,0,0,.84)";
                                                return;
                                            }
                                        }

                                        if (backgroundContainer.classList.contains('withBackdrop')) {
                                            //We must be viewing something other then #itemDetails to get this far, and video is not playing
                                            //Check if there is a backdrop enabled then apply the style
                                            backgroundContainer.style.backdropFilter = "saturate(0.7) blur(0em)";
                                            backgroundContainer.style.backgroundColor = "transparent";
                                        }
                                    } catch (err) {

                                    }
                                });
                                observer.observe(document, {
                                    childList: true,
                                    subtree: true,
                                    attributes: true,
                                    attributeOldValue: true,
                                }); 
				</script>

 

[visproduction 123]

1. Use the browser inspect to double check that none of the styles from your javascript are canceled due to some !important listing in some other css file style entry.
2. Look here to see if any of your filter values need adjustment: https://drafts.fxtf.org/filter-effects/#placement   Try adjusting them more extremely to make sure you see a change on a test page with a background.
3. Try adding Console logs in various places in the script, to see where there may be a problem.  Look at the browser / inspect / console to review. 

   console.log('test 1-backgroundContainer: ',backgroundContainer); 

    

4. This class has the darken mask on Media detail page.  Do you want to set it to display:none; so you better see your background?

   .itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop

    

Hope that helps.