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

[jord8on (Jordan)]

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…

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)

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

I can accomplish this ︎ 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!

[codinghorror (Jeff Atwood)]

Perhaps @Johani or @awesomerobot can advise here?

[awesomerobot (Kris)]

@jord8on

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

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 { }

[jord8on (Jordan)]

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?

[awesomerobot (Kris)]

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).