Crear superposición de degradado de fondo en la página, haciendo que el área de discusión sea blanca

Soporte
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 :arrow_up:︎ 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! Eso funcionó de maravilla (¡ve la imagen a continuación)! ¡Muchas gracias por la respuesta tan rápida!

Una pregunta más… desde el punto de vista de las mejores prácticas y la eficiencia, ¿es esta la mejor manera de lograr lo que quiero hacer? ¿Es esta la solución más “ligera” y eficiente? ¿O sería mejor tener una imagen estática que no se repita, o alguna otra solución, para lograr lo que intento hacer usando menos recursos/ancho de banda, etc.?

image
image1478×1364 486 KB

5

Mi suposición es que un patrón repetitivo con un degradado de CSS sería el mejor enfoque… Una imagen estática probablemente sería significativamente más grande, y descargar un archivo más grande probablemente tiene un impacto mayor que cualquier otra cosa (sin duda consumiría más ancho de banda que el CSS que crea el degradado).