Jump to content

Background blur


arrbee99

Recommended Posts

Happy2Play
Just now, arrbee99 said:

I do that too, but I don't think I would have ever spotted that possible double effect thing.

I did do to applying your code to a test system with no other custom css.  The server theme background code applies along with your..

Try something like this.

div.backgroundContainer.withBackdrop :not (.itemView) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em);
    -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
}

 

Link to comment
Share on other sites

arrbee99

For me, that doesn't work - non of the backgrounds are blurry.

 

Link to comment
Share on other sites

Happy2Play
13 minutes ago, arrbee99 said:

For me, that doesn't work - non of the backgrounds are blurry.

 

Okay how about this one.

div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em);
    -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
}

 

Link to comment
Share on other sites

arrbee99

I do believe we (well you) have a winner.

Thanks very much.

Link to comment
Share on other sites

arrbee99

There'll probably be a new css question or two in 5 minutes if you're on a roll and if you're unlucky and if you haven't run away screaming...

  • Haha 1
Link to comment
Share on other sites

  • 4 weeks later...
arrbee99

Erm, sorry, me again.

This blurry background thing works fine but I found it also turns up when playing music, specifically here.

176186069_Embymusicwrongblurrybackground.thumb.JPG.ed1fd9047da762541d81e14678c4f7d0.JPG

Am wondering if it could just show a normal unfuzzy background ?

I've been trying stuff like this -

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/


/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer, div.videoOsdBottom.wideOsdBottom) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer):not(div.videoOsdBottomwideOsdBottom-maincontrols.flex.wideOsdBottom-remotecontrol) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/


/* Make Home page and Movie TV page background images blurry and bright */
div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer):not(div.mainAnimatedPages.skinBody) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}


The first one is the normal default working one, the others my (surprisingly) failed attempts at a solution.

Any thoughts please ?

Link to comment
Share on other sites

Happy2Play
27 minutes ago, arrbee99 said:

Erm, sorry, me again.

This blurry background thing works fine but I found it also turns up when playing music, specifically here.

176186069_Embymusicwrongblurrybackground.thumb.JPG.ed1fd9047da762541d81e14678c4f7d0.JPG

Am wondering if it could just show a normal unfuzzy background ?

I've been trying stuff like this -

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/


/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer, div.videoOsdBottom.wideOsdBottom) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/

/* Make Home page and Movie TV page background images blurry and bright */
/*div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer):not(div.videoOsdBottomwideOsdBottom-maincontrols.flex.wideOsdBottom-remotecontrol) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}*/


/* Make Home page and Movie TV page background images blurry and bright */
div.backgroundContainer.withBackdrop:not(div.itemBackgroundContainer):not(div.mainAnimatedPages.skinBody) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}


The first one is the normal default working one, the others my (surprisingly) failed attempts at a solution.

Any thoughts please ?

You can't as Now playing is no longer "itemBackgroundContainer", it is the same as Home/library backgrounds.  

Link to comment
Share on other sites

arrbee99

Oh well, thats a bit of a bugger. I guess its not quite the end of civilisation as we know it though 😀

Thanks for the info!

Link to comment
Share on other sites

  • 1 year later...
Happy2Play

@arrbee99 works in Nightly FF 103

/* Make Home page and Movie TV page background images blurry and bright */
div.backgroundContainer.withBackdrop:not(.itemBackgroundContainer):not(.nowplaying-backgroundcontainer-brighter) {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(0.4) blur(1.5em);
    -webkit-backdrop-filter: saturate(0.4) blur(1.5em);
}

 

Link to comment
Share on other sites

arrbee99

Thank you. Was looking at running 103 nightly but it seems a bit of a rigmarole running alongside ordinary 102. I mean it seems to be just follow the instructions I found I might. Or maybe just move to nightly, but then it is nightly, so maybe I'll just wait. Or will I ? hmmm...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...