Background image responsive

[katherine]

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.

[web.designer.monza]

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