Design Question: Change forum radial background dimensions

[jord8on (Jordan)]

I have a followup question to this post: Create background gradient overlay on page, making the discussion area white

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:

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?

[jord8on (Jordan)]

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:

[awesomerobot (Kris)]

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.

[jord8on (Jordan)]

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