Create background gradient overlay on page, making the discussion area white

Product Support

AI-generated summary

jord8on wants to add a background gradient overlay to their Discourse page, making the discussion area white. They currently have a repeating .svg background pattern, but it’s distracting in the main content area. They’d like to apply a gradient that gradually increases the opacity of the background from 0% in the center to 100% at the edges.

awesomerobot suggests using a radial gradient overlay with CSS, defining two backgrounds at once. They provide an example code snippet that achieves the desired effect.

jord8on confirms that the solution works and asks if it’s the most efficient way to accomplish this. awesomerobot replies that a repeating pattern with a CSS gradient is likely the best approach, as a static image would be larger and consume more bandwidth.

1

I’ve added a subtle .svg background PATTERN (which repeats) to my theme CSS, using the following code:

body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}

The default .wrap area in a new Discourse installation is max-width: 1110px; Currently my background is a little distracting to the conversation text in the middle of the page (the main content area).

I would like to have the main-outlet, center area where text and discussions are taking place, 0% opaque in the very center, showing just a white background, and then apply some kind of gradient that gradually increases the opacity of my background to 100%, which would show the background around all the edges.

This is currently how my background appears… at 100% opacity, on the entire page…

image
image1655×1713 777 KB

Here’s what I would like to have happen…
I’d like the general area (doesn’t have to be exact), outlined in red, to have my background with 0% opacity, thus leaving the default, completely white background. (idk, but this may require a bi-linear horizontal gradient overlay to my background that would go from #FFFFFF (white) in the center, to transparent on the edges)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Here’s an example of what I’d like the page to look like…

Monosnap 2019-12-13 10-20-04
Monosnap 2019-12-13 10-20-041004×1324 258 KB

I can accomplish this :up_arrow:︎ using a background image that’s not an svg but it was so granulated. I wanted a high quality images as my background so I’m currently using the svg.

If anyone has an idea of how I could make these adjustments, I would love to hear your thoughts!

2

Perhaps @Johani or @awesomerobot can advise here?

3

Right, a gradient overlay is probably the best approach… you can define two backgrounds at once like this:

body {
 background: radial-gradient(circle at center, rgba(255,255,255,1) 35%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top / 300px auto  ;
 background-attachment: fixed;
}

Or if you only want this background gradient on topic pages and not other pages (like profiles, topic lists, etc)… you could put the pattern on body, and then the gradient background on top of that in .archetype-regular #main-outlet { }

4

Kris! That worked brilliantly (see image below)! Thanks so much for the quick response!!

One more question… from the best practices and efficiency standpoint, is this the best way to accomplish what I want to do? Is this the most “lightweight” and efficient solution? or would having a static image the doesn’t repeat, or some other solution, be a better way to do what I’m trying to do while using less resources/bandwith, etc?

image
image1478×1364 486 KB

5

My guess is that a repeating pattern with a CSS gradient would be the best approach… A static image would probably be significantly larger, and downloading a larger file likely has a greater impact than anything else would (certainly would consume more bandwidth than the CSS that creates the gradient).