• User Attivo

    Adattamento template

    Salve a tutti ho un problema con lo sfondo del mio sito, allora ho impostato un immagine di sfondo e fatto qualche test, ed ho notato che in alcune occasioni come la visualizzazione del sito da un display diverso da quello di lavorazione e l'aggiunta di un certo numero di elementi (come l'aggiunta di opzioni della galleria come la possibilità di dividere le immagini in + pagine) sotto la mia immagine si presenta una linea bianca, come si può fare affinchè questa non si ripresenti mai + (e senza che l'immagine si ripeta)?

    Vi allego il body del mio css

    }

    body{ margin:0; padding:0; text-align:center; background:#fdfdfd url(../images/bg.jpg) no-repeat; font-size:13px; color:#fff; font-family: Arial, Helvetica, sans-serif; font-weight:bold;

    }

    ed uno stamp della pagina problematica

    oi44.tinypic.com/14prlx.jpg (non badate alle linee grigie quelle sono estranee.)

    Grazie dell'aiuto!


  • Moderatore

    Ciao Actionscripter,
    ho spostato il post nella sezione template, mi dispiace ma purtroppo non so aiutarti.

    Maurizio ZioPal


  • User Attivo

    ciao, ci sono delle estensioni per impostare un'immagine di background, alcune di esse hanno l'opzione ad esempio di stretchare la stessa nei diversi dispositivi senza alterazioni, oppure puoi utilizzare jquery o anche i css.
    basta cercare responsive backround image
    spero ti sia di aiuto.
    ciao


  • Moderatore

    Ciao Actionscripter.
    Probabilmente la riga del CSS relativa al body e lo screenshot non sono sufficienti a dare una risposta definitiva.
    Se però il problema si verifica quando il contenuto del sito è tale "scrollare" al punto che l'altezza dell'immagine non basti più (cioè ad esempio hai un'immagine alta 1600px ma te ne servirebbe una da 2000px) allora puoi provare a intervenire in uno dei seguenti modi:

    • togliere il no-repeat al background: in questo caso l'immagine si ripeterà dove serve, in orizzontale e/o verticale; nel tuo caso, quindi, al posto della striscia bianca visualizzerai una o più volte la stessa immagine di background; nota che così l'effetto estetico può lasciare a a desiderare;
    • aggiungere al body background il background-attachment: fixed : lo sfondo sarà fisso e a scrollare sarà soltanto quello che c'è sopra il background.

    Hai parlato di display diversi: nei siti responsive, ad esempio, ciò che su uno schermo desktop appare alto 1200px può invece apparire molto più alto su un tablet o uno smartphone, poiché il contenuto si dispone in verticale allungando di fatto la pagina. Se hai uno sfondo *fixed *il problema non si pone, ma se lo sfondo scrolla allora deve essere sufficientemente alto o si deve ripetere.

    I web designer usano varie tecniche per fare fronte a queste situazioni, spesso in maniera creativa.
    Se la tua pagina pesa già abbastanza e vuoi fare attenzione al traffico mobile, considera la possibilità di caricare immagini diverse secondo la tipologia e le dimensioni dello schermo. Se hai dubbi su questo punto ti consiglio di cercare/aprire una discussione nella sezione CSS del Forum GT.

    F. 🙂