---
title: Sfondo
description: Scegli una decorazione, sovrascrivi il colore di sfondo per modalità o regola colore, dimensioni, posizione e opacità del gradiente Jam.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Il blocco `background` in `docs.json` controlla lo sfondo della pagina. Puoi scegliere uno dei quattro tipi di decorazione, sovrascrivere il colore di base per modalità e regolare il gradiente predefinito.

```json docs.json
{
  "theme": "jam",
  "background": {
    "decoration": "none",
    "color": {
      "light": "#faf7f2",
      "dark": "#0a0a0d"
    }
  }
}
```

Tutti i campi sono facoltativi. Ometti l'intero blocco `background` per usare i valori predefiniti del tema.

## decorazione

Scegli il tipo di sfondo per la modalità chiara del tema Jam. Ogni valore visualizza un motivo distinto sopra il colore di base `--color-bg-primary`; la modalità scura visualizza sempre uno sfondo uniforme, indipendentemente dal valore.

```json docs.json
{
  "background": {
    "decoration": "grid"
  }
}
```

| Valore | Comportamento |
|-------|----------|
| `gradient` (predefinito) | Gradiente radiale ancorato in alto. Regolabile tramite il blocco `gradient` qui sotto |
| `grid` | Motivo a griglia di punti discreto: punti da 1,5 px in `--color-primary` con opacità dell'8% e spaziatura di 24 px |
| `windows` | Due aree radiali sfumate negli angoli superiori, per un effetto satinato in stile Windows 11 |
| `none` | Riempimento uniforme `--color-bg-primary`, senza decorazioni |

<Note>
`decoration` influisce solo sulla modalità chiara del tema Jam. Nebula e Pulsar visualizzano sfondi uniformi indipendentemente dal valore. Nella modalità scura di Jam, tutti i valori producono uno sfondo uniforme.
</Note>

## colore

Sovrascrivi il colore di sfondo della pagina per modalità. Accetta qualsiasi colore CSS: hex, `rgb(...)`, `rgba(...)` o `hsl(...)`.

```json docs.json
{
  "background": {
    "color": {
      "light": "#faf7f2",
      "dark": "#0a0a0d"
    }
  }
}
```

| Campo | Si applica a |
|-------|------------|
| `color.light` | Sfondo del corpo in modalità chiara |
| `color.dark` | Sfondo del corpo in modalità scura |

Entrambi i campi sono facoltativi. Imposta solo `light` per sovrascrivere la modalità chiara e mantenere il valore predefinito scuro del tema, o viceversa. Funziona con tutti i temi (Jam, Nebula, Pulsar).

<Tip>
Abbina `decoration: "none"` a una sovrascrittura di `color` per ottenere uno sfondo uniforme personalizzato. È una scelta comune nella documentazione editoriale o in stile marketing.
</Tip>

## gradiente

Regola il gradiente radiale in modalità chiara del tema Jam. Tutti e quattro i campi sono facoltativi e vengono applicati indipendentemente. Imposta solo `color` per cambiare il colore oppure solo `size` per ridurre o aumentare le dimensioni.

```json docs.json
{
  "background": {
    "gradient": {
      "color": "#a855f7",
      "size": "800px",
      "position": "top center",
      "opacity": 0.25
    }
  }
}
```

| Campo | Predefinito | Descrizione |
|-------|---------|-------------|
| `color` | Eredita `colors.primary` | Colore del gradiente (qualsiasi colore CSS) |
| `size` | `500px` | Raggio. Qualsiasi unità di lunghezza CSS (`px`, `rem`, `%`, `vh`) |
| `position` | `top center` | Punto centrale. Parole chiave `top`/`bottom`/`center`/`left`/`right`, percentuali o coordinate in pixel |
| `opacity` | `0.12` | Opacità massima al centro. Numero compreso tra `0` e `1` |

<Note>
`gradient` si applica solo quando `decoration` è `gradient` (o non è impostato). Le decorazioni `grid`, `windows` e `none` ignorano questo blocco: `grid` e `windows` leggono `--color-primary` per il colore del motivo, quindi personalizzalo tramite il blocco `colors`.
</Note>

### Supporto browser

Il gradiente parametrico (utilizzo di variabili CSS) usa `color-mix()`, che richiede:

- Chrome / Edge 111+
- Firefox 113+
- Safari 16.2+

I browser meno recenti usano il gradiente Jam originale: visualizzano il valore predefinito del brand e ignorano le sovrascritture di `gradient`. Il fallback ha comunque un aspetto pulito, ma non può essere personalizzato.

## Ricette comuni

<AccordionGroup>
  <Accordion title="Sfondo crema uniforme, senza gradiente">
    ```json docs.json
    {
      "background": {
        "decoration": "none",
        "color": {
          "light": "#faf7f2",
          "dark": "#0a0a0d"
        }
      }
    }
    ```
    Comune nella documentazione in stile editoriale. Funziona con qualsiasi tema.
  </Accordion>

  <Accordion title="Gradiente viola discreto">
    ```json docs.json
    {
      "background": {
        "gradient": {
          "color": "#a855f7",
          "opacity": 0.15
        }
      }
    }
    ```
    Cambia il colore del gradiente Jam senza modificarne le dimensioni o la posizione.
  </Accordion>

  <Accordion title="Gradiente più grande, decentrato">
    ```json docs.json
    {
      "background": {
        "gradient": {
          "size": "1200px",
          "position": "top left",
          "opacity": 0.2
        }
      }
    }
    ```
    Gradiente più ampio e diffuso, ancorato all'angolo superiore sinistro.
  </Accordion>

  <Accordion title="Griglia di punti discreta">
    ```json docs.json
    {
      "background": {
        "decoration": "grid"
      }
    }
    ```
    Disegna una griglia di punti tenue da 24 px nel colore primario del tema. Legge `--color-primary`, quindi puoi cambiare il colore dei punti impostando `colors.primary` in `docs.json`.
  </Accordion>

  <Accordion title="Effetto satinato in stile Windows 11">
    ```json docs.json
    {
      "background": {
        "decoration": "windows"
      }
    }
    ```
    Due aree radiali sfumate negli angoli superiori, ancorate alla viewport. Legge `--color-primary` per il colore delle aree.
  </Accordion>

  <Accordion title="Solo sovrascrittura modalità scura">
    ```json docs.json
    {
      "background": {
        "color": {
          "dark": "#0d0d12"
        }
      }
    }
    ```
    Mantiene i valori predefiniti del tema nella modalità chiara e imposta uno sfondo personalizzato nella modalità scura.
  </Accordion>
</AccordionGroup>

## Prossimi passi?

<Columns cols={3}>
  <Card title="Temi" icon="palette" href="/it/customization/theming">
    Scegli un tema di base e sovrascrivi i colori
  </Card>
  <Card title="CSS personalizzato" icon="paintbrush" href="/it/customization/custom-css">
    Sovrascrivi qualsiasi elemento gestibile con CSS
  </Card>
  <Card title="Branding" icon="image" href="/it/customization/branding">
    Loghi, favicon e risorse del brand
  </Card>
</Columns>