Design Question: Change forum radial background dimensions

Product Support

AI-generated summary

The discussion revolves around a design question regarding changing the dimensions of a forum’s radial background. jord8on initially posted a question about making the opacity of the background increase towards the bottom of the page on mobile devices. They provided their current code and images of the background.

jord8on later found a temporary solution by adding custom CSS to the suggested topics area, making the background more opaque at the bottom.

However, awesomerobot pointed out that the background-attachment: fixed property doesn’t work on iOS devices due to performance issues. They provided a workaround using CSS to achieve a similar effect, but noted that it may still cause performance problems.

jord8on thanked awesomerobot for their solution and acknowledged their design skills.

1

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

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

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
image1299×1597 385 KB

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?

2

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
background opacity tweak2938×3028 1.25 MB

3

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.

4

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

source
source691×658 1.09 MB