I have a followup question to this post: Create background gradient overlay on page, making the discussion area white [IMG_3CFC38C5EDA2-1] Notice as you get to the bottom of the forums, on mobile, that the background competes with the “Suggested Topics” What if I want to make the opacity increas more toward the bottom of the page (y-axis) but keep the top as it is? My current code is this… body { background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto ; background-attachment: fixed; } Here’s the background that code places on the community: [image] The background doesn’t interfere too much with the Suggested Topics, on the desktop, but it’s a bit more heavy on a mobile device. Again, I just want to make it more opaqe at the bottom of the y-axis. Is there a tweak i could make to my code?

I think I found a little hack which might not be the best solution but it definitely does what I’m looking for so I’ll document it here, and hope that if this is not a good solution that someone will chime in! The default CSS for the Suggested topics area at the bottom of the screen is: .suggested-topics { clear: left; padding: 20px 0 15px 0; } So I added the following to my custom CSS (I didn’t mess with the “clear: left”)… .suggested-topics { padding: 20px; background: rgba(255, 255, 255, 0.6); } This actually worked pretty well! Here’s a before and after, on mobile: [background opacity tweak]

Oh right, I forgot that background-attachment: fixed doesn’t work on iOS… they disable it because apparently it causes the entire screen to be redrawn while scrolling, which is bad for performance. There are workarounds… example css body.mobile-view { background: none; } body.mobile-view:after { content:""; position:fixed; left:0; top:0; right:0; bottom:0; z-index:-1; display:block; background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto; background-size:cover; } …though while they enable the functionality… they’re still subject to the performance issues, so you might want to try a different background approach entirely for mobile if you’re not happy with that.

Design Question: Change forum radial background dimensions

Product Support

jord8on (Jordan) March 4, 2020, 7:01pm 4

Brilliant! Thank you @awesomerobot! Always appreciate your mad design skills!

Topic		Replies	Views
Create background gradient overlay on page, making the discussion area white Product Support	4	1072	January 6, 2020
How to have an iOS like Tranlucent-blurry Header UX	10	8495	October 25, 2018
Category background images do not scale good for mobile UX	7	1621	September 17, 2019
Issues with background of posts in mobile in beta9 Product Support	2	553	December 10, 2021
Select-kit is completely missing Product Support	9	794	July 27, 2022

Design Question: Change forum radial background dimensions

Related topics