# Crie uma sobreposição de gradiente de fundo na página, deixando a área de discussão branca
**URL:** https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879
**Category:** Support
**Created:** [Dezembro 13, 2019, 6:07pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879 "2019-12-13T18:07:14Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 13, 2019, 6:07pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/1 "2019-12-13T18:07:14Z")
Adicionei um padrão de fundo .svg sutil (que se repete) ao CSS do meu tema, usando o seguinte código:
```
body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}
```
A área `.wrap` padrão em uma nova instalação do Discourse tem `max-width: 1110px;`. Atualmente, meu fundo está um pouco distrativo para o texto da conversa no meio da página (a área de conteúdo principal).
Gostaria que a área central `main-outlet`, onde ocorrem os textos e discussões, tivesse 0% de opacidade exatamente no centro, mostrando apenas um fundo branco, e então aplicar algum tipo de gradiente que aumente gradualmente a opacidade do meu fundo até 100%, fazendo com que o fundo apareça em todas as bordas.
Esta é a aparência atual do meu fundo… com 100% de opacidade, em toda a página…
Aqui está o que gostaria que acontecesse…
Gostaria que a área geral (não precisa ser exata), delimitada em vermelho, tivesse meu fundo com 0% de opacidade, deixando assim o fundo branco padrão completamente visível. (não sei, mas isso pode exigir uma sobreposição de gradiente bilinear horizontal no meu fundo, que vá de #FFFFFF (branco) no centro até transparente nas bordas)
Aqui está um exemplo de como gostaria que a página ficasse…
Posso fazer isso ⬆︎ usando uma imagem de fundo que não seja SVG, mas ela ficava muito granulada. Queria uma imagem de alta qualidade como fundo, então estou usando o SVG no momento.
Se alguém tiver uma ideia de como fazer esses ajustes, adoraria ouvir suas sugestões!
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Dezembro 13, 2019, 6:15pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/2 "2019-12-13T18:15:33Z")
Talvez @Johani ou @awesomerobot possam aconselhar aqui?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Dezembro 13, 2019, 6:42pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/3 "2019-12-13T18:42:29Z")
> [@jord8on](#):
>
> Não sei, mas isso pode exigir uma sobreposição de gradiente horizontal bilinear no meu fundo, que vá de #FFFFFF (branco) no centro até transparente nas bordas
Certo, uma sobreposição de gradiente é provavelmente a melhor abordagem… você pode definir dois fundos ao mesmo tempo assim:
```css
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;
}
```
Ou, se você quiser esse gradiente de fundo apenas nas páginas de tópicos e não em outras páginas (como perfis, listas de tópicos, etc)… você pode colocar o padrão no `body` e, em seguida, o fundo com gradiente por cima em `.archetype-regular #main-outlet { }`
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [Dezembro 28, 2019, 12:43am UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/4 "2019-12-28T00:43:39Z")
Kris! Isso funcionou brilhantemente (veja a imagem abaixo)! Muito obrigado pela resposta rápida!!
Mais uma pergunta… do ponto de vista das melhores práticas e eficiência, essa é a melhor maneira de fazer o que eu quero? É a solução mais “leve” e eficiente? Ou ter uma imagem estática que não se repete, ou alguma outra solução, seria uma maneira melhor de fazer o que estou tentando fazer, usando menos recursos/banda, etc?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Janeiro 6, 2020, 4:14pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/5 "2020-01-06T16:14:29Z")
Minha aposta é que um padrão repetitivo com um gradiente CSS seria a melhor abordagem… Uma imagem estática provavelmente seria significativamente maior, e baixar um arquivo maior provavelmente tem um impacto maior do que qualquer outra coisa (certamente consumiria mais largura de banda do que o CSS que cria o gradiente).
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [Fevereiro 5, 2020, 4:14pm UTC](https://meta.discourse.org/t/create-background-gradient-overlay-on-page-making-the-discussion-area-white/135879/6 "2020-02-05T16:14:38Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.