Immagine responsive viene tagliata

[tomtomeight]

Buonasera

Sto rifacendo  un vecchio sito dalla versione 2.5 portandolo alla ultima corrente 3.9.1, devo per quanto è possibile riprodurre più o meno la stessa grafica ed ho optato per il framework Gantry 5 e template Hydrogen che credo di conoscere abbastanza.
Vecchio sito: peg.coinsnet.eu Nuovo sito in costruzione: peg.coinsnet/NEW
Come da titolo non riesco a rendere pienamente responsive l'immagine di testata, accade che restringendo fino ad un certo punto la finestra browser,  mi viene tagliata una fetta dal lato destro, ma continuando a restringere si ridimensiona bene.
Chi mi aiuta a rendere il passaggio lineare?

Il codice css che gestisce l'immagine è l seguente:

Codice: [Seleziona]

#g-header {
    background-image: url('images/header.jpg');   
    background-repeat: no-repeat; 
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

[danielecr]

Ciao, il meglio che son riuscito a ricavare è modificare

Codice: [Seleziona]

-webkit-background-size: cover;
 -moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

con

Codice: [Seleziona]

-webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

La schiaccia leggermente...

Altrimenti con le media queries potresti predisporre differenti immagini di background di diversa dimensione a seconda della dimensione dello schermo

[tomtomeight]

Ciao e scusa se rispondo solo adesso.
Credo che proverò con le media queries, non è tanto lo schiacciamento della immagine ma le voci del menù che escono fuori dalla banda superiore.
Grazie.