• Super User

    Background image responsive

    Ciao a tutti, da giorni sto cercando invano una soluzione a questo problema. Nell'header del mio sito ho inserito un immagine di sfondo full width.
    Ora devo renderla responsive (premetto che sto lavorando con bootstrap).

    Per ora sono arrivata a:

    .header {
    background-image:url (.....);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    height:100vh;
    }

    In questo modo l'immagine diventa effettivamente responsive MA ho un grosso problema con l'altezza.
    Perfetto in versone desktop, tablet e mobile sotto l'immagine ho un grande spazio bianco. Quindi deduco che il problema sia nel height:100vh; ma proprio non saprei come risolvere.

    Vi ringrazio anticipamente per l'aiuto.


  • User

    Hai provato con background-size: contain; ? poi eventualmente a partire da questo dopo delle aggiustatine.
    Eventualmente sennò ti puoi un attimo regolare con le media-quiries... così hai il pieno controllo su tutte le risoluzioni