--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo' title: 'Mettere un colore o una foto dietro il contenuto | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:45:17+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dai a una fascia della tua pagina un colore del brand o una foto, così un titolo risalta e la fascia si legge come un unico blocco. Imposti il colore e la foto nel pannello Stile di qualsiasi elemento. Una Sezione aggiunge un pannello Effetti di sfondo per una foto fissa, parallasse, un gradiente o un video YouTube. Il video segue la ricetta sotto: mette una foto dietro un titolo e un gradiente scuro sopra la foto, così il titolo bianco resta leggibile. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Mettere un colore o una foto dietro il contenuto' description: |- Dai a una fascia della tua pagina un colore del brand o una foto, così un titolo risalta e la fascia si legge come un unico blocco. Imposti il colore e la foto nel pannello Stile di qualsiasi elemento. Una Sezione aggiunge un pannello Effetti di sfondo per una foto fissa, parallasse, un gradiente o un video YouTube. Il video segue la ricetta sotto: mette una foto dietro un titolo e un gradiente scuro sopra la foto, così il titolo bianco resta leggibile. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:45:17+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo' description: |- Dai a una fascia della tua pagina un colore del brand o una foto, così un titolo risalta e la fascia si legge come un unico blocco. Imposti il colore e la foto nel pannello Stile di qualsiasi elemento. Una Sezione aggiunge un pannello Effetti di sfondo per una foto fissa, parallasse, un gradiente o un video YouTube. Il video segue la ricetta sotto: mette una foto dietro un titolo e un gradiente scuro sopra la foto, così il titolo bianco resta leggibile. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) # Mettere un colore o una foto dietro il contenuto. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Cambiare dimensione e colore del testo](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia) Dai a una fascia della tua pagina un colore del brand o una foto, così un titolo risalta e la fascia si legge come un unico blocco. Imposti il colore e la foto nel pannello **Stile** di qualsiasi elemento. Una Sezione aggiunge un pannello **Effetti di sfondo** per una foto fissa, parallasse, un gradiente o un video YouTube. Il video segue la ricetta sotto: mette una foto dietro un titolo e un gradiente scuro sopra la foto, così il titolo bianco resta leggibile. ## Prima di iniziare - Apri la pagina in DXPR Builder; indicare un elemento mostra la sua barra di controllo con **Altro**. È la prima volta che usi il page builder? Vedi [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina). - **Salva** nella finestra mantiene una modifica nell’editor. **Salva** nella barra degli strumenti del page builder sopra i tuoi contenuti memorizza la pagina e mostra “Campo salvato”. - **Usa una Sezione** per una fascia intera della pagina. Solo una Sezione ha **Effetti di sfondo**. - **Usa un elemento Testo o Card** per un riquadro colorato dietro poche righe dentro una colonna. - **Usa il tuo tema** per sfondi su ogni pagina, come il corpo della pagina o il footer. - **Tieni le parole fuori dalla foto.** Un’immagine di sfondo non ha testo alternativo, quindi gli screen reader la saltano. Metti il tuo messaggio in un titolo sopra. ## Ricetta: un titolo leggibile su una foto Il testo bianco su una foto affollata è difficile da leggere. Un gradiente scuro sopra la foto risolve il problema, e continua a funzionare quando scambi la foto. Ti serve una Sezione che contiene il tuo titolo in un elemento Testo. 1. Passa sopra la **Sezione**, fai clic su **Altro**, poi **Impostazioni**. 2. Apri il pannello **Stile** e fai clic su **Seleziona immagine** sotto **Immagine di sfondo**. Scegli una foto. Appare una miniatura, con un elenco di dimensioni immagine. 3. Nell’elenco di dimensioni immagine, scegli una dimensione almeno larga quanto lo schermo più largo per cui progetti, o **Immagine originale (Nessun ridimensionamento)**. Evita **Ottimizza per caricamento veloce** per una fascia intera. 4. Imposta **Stile sfondo** su **Cover** e **Posizione sfondo** su **Center center**. 5. Apri il pannello **Effetti di sfondo** e imposta **Effetto di sfondo** su **Gradiente**. La tua foto resta; il gradiente sta sopra di essa. 6. Nel campo colore di **Colore iniziale**, digita `rgba(0, 0, 0, 0.6)`: nero al 60%. Digita `rgba(0, 0, 0, 0.3)` per **Colore finale**. Lascia **Direzione gradiente** a 180, così il velo va dall’alto in basso. 7. Fai clic su **Salva** nella finestra. La sezione mostra la foto sotto un velo scuro. 8. Passa sopra l’elemento **Testo**, fai clic su **Altro**, poi **Impostazioni**. Nel suo pannello **Stile**, imposta **Colore carattere** su bianco e fai clic su **Salva**. 9. Fai clic su **Salva** nella barra degli strumenti. Controlla il titolo contro la parte più chiara della foto. Punta a un contrasto di almeno 4,5 a 1, o 3 a 1 per titoli grandi; la pagina [tipografia](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia) spiega questi obiettivi. Ancora difficile da leggere? Alza entrambi i valori, ad esempio a 0,8 e 0,5. ## Cosa vedi La sezione mostra la tua foto sotto un velo scuro, più scuro in cima, con il titolo bianco sopra. **Cover** riempie l’intera sezione, così su uno schermo stretto vengono tagliati di più i lati della foto. ## Come funzionano le impostazioni | Controllo | Cosa fa | |---|---| | **Sfondo** | Un colore dietro il contenuto. Il cursore di opacità del selettore lo rende trasparente. | | **Immagine di sfondo** | Un’immagine dietro il contenuto: da **Seleziona immagine**, da un URL, o da **Generazione immagini AI** a meno che il tuo sito l’abbia disattivata. | | **Stile sfondo** | Come l’immagine riempie l’elemento. Vedi la prossima tabella. | | **Posizione sfondo** | Il punto a cui l’immagine è fissata. Con **Cover**, decide quale parte della foto resta visibile. | | **Stile sfondo** | Risultato | |---|---| | **Predefiniti del tema** | A meno che il tuo tema dica diversamente, l’immagine si ripete alla sua dimensione dall’angolo in alto a sinistra. | | **Cover** | L’immagine riempie l’elemento e i bordi che non ci stanno sono tagliati. Ideale per foto. | | **Contain** | L’intera immagine si mostra, una volta. Possono restare fasce vuote su due lati. Ideale per loghi. | | **No repeat** | Una copia alla sua dimensione. | | **Repeat** | L’immagine si ripete a piastrelle attraverso l’elemento. Buono per motivi. | Il colore sta sotto l’immagine. Si mostra attraverso le parti trasparenti di un’immagine, nelle fasce intorno a un’immagine **Contain**, e mentre la foto si carica. Scegli un colore vicino al tono principale della foto. La dimensione **Ottimizza per caricamento veloce** riduce un’immagine a un massimo di 1024 px di larghezza e la salva come WebP. Va bene per un riquadro, ma sembra sfocata su una fascia intera su uno schermo grande. La stessa immagine si carica su ogni dimensione dello schermo, telefoni inclusi. Il pannello **Stile hover** ha il suo **Sfondo** e **Immagine di sfondo**, così un riquadro può cambiare colore o scambiare la sua immagine al passaggio del mouse. ## Effetti di sfondo della sezione Questi effetti hanno bisogno di una Sezione. **Immagine fissa** e **Immagine parallasse** spostano la foto da **Immagine di sfondo**, quindi imposta prima la foto. | **Effetto di sfondo** | Cosa vedono i visitatori | Impostazioni | |---|---|---| | **Immagine semplice** | La foto scorre con la pagina. Questo è il predefinito. | nessuna | | **Immagine fissa** | La foto resta ferma mentre il contenuto scorre sopra di essa. | nessuna | | **Immagine parallasse** | La foto scorre più lentamente del contenuto. | **Velocità parallasse** (da 0 a 100; scegliere **Immagine parallasse** imposta 20 quando è 0), **Modalità parallasse** (**Fisso** o **Locale**), **Disabilita su mobile** (schermi sotto 481 px di larghezza) | | **Gradiente** | Una miscela di due colori, usata da sé o sopra la foto. | **Colore iniziale**, **Colore finale**, **Direzione gradiente** (da 1 a 360 gradi; 180 va dall’alto in basso), **Posizione iniziale**, **Posizione finale** | | **Video YouTube** | Un video silenziato viene riprodotto mentre la sezione è sullo schermo e si mette in pausa quando scorre via. | **URL video YouTube**, **Tempo iniziale in secondi**, **Tempo finale in secondi**, **Opzioni video** | Sopra una foto, il gradiente va sempre da bordo a bordo. **Posizione iniziale** e **Posizione finale** si applicano solo a un gradiente senza foto. ## Se non vedi lo sfondo - **La foto si mostra come una striscia sottile.** Uno sfondo non aggiunge altezza; la sezione è alta quanto il suo contenuto e padding. Aggiungi contenuto, o attiva **Altezza 100%** nel pannello **Generale**. Per più padding, segui [una sezione più alta](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura#recipe-a-taller-section). - **La foto si ripete o mostra solo un angolo.** **Stile sfondo** è su **Predefiniti del tema**. Scegli **Cover**. - **La foto sembra sfocata su uno schermo largo.** **Ottimizza per caricamento veloce** la rende al massimo 1024 px di larghezza. Scegli una dimensione più larga nell’elenco di dimensioni immagine. - **La foto è nascosta dietro nero solido.** I colori del gradiente non hanno trasparenza. Termina ogni valore con un numero sotto 1, come `rgba(0, 0, 0, 0.6)`. - **Il titolo resta scuro.** Una classe di colore sotto le **Classi HTML** dell’elemento Testo, o una regola del tema con `!important`, vince. Rimuovi il chip, o vedi [tipografia](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia). - **Lo sfondo è sparito dopo un ricaricamento della pagina.** **Salva** nella finestra mantiene una modifica solo nell’editor. Fai clic su **Salva** nella barra degli strumenti. - **Il colore non si mostra.** La foto lo copre. Per una tinta sopra la foto, usa **Gradiente** in **Effetti di sfondo**. - **Posizione iniziale e Posizione finale non cambiano niente.** La sezione ha un’**Immagine di sfondo**, quindi il gradiente va da bordo a bordo. Usa invece **Direzione gradiente** e colori trasparenti. - **Vince un colore di classe.** Una classe come **Sfondo Primary** sotto **Classi HTML** batte il tuo **Sfondo**. Rimuovi il suo chip. - **Sfondo non fa niente su un Contatore circolare, Barra di avanzamento o Divisore.** Questi elementi usano i loro colori. Imposta **Colore sfondo**, **Colore posteriore** o **Colore** nel pannello **Generale**. ## Passi successivi - [Tipografia](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia): imposta il colore del titolo sulla tua foto e controlla il suo contrasto.