Joomla.it Forum

Joomla! 3 => I Template di Joomla! 3 => : tomtomeight 20 Dec 2018, 18:58:44

: Immagine responsive viene tagliata
: tomtomeight 20 Dec 2018, 18:58:44

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:

:

#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%;
}

: Re:Immagine responsive viene tagliata
: danielecr 21 Dec 2018, 14:05:12

Ciao, il meglio che son riuscito a ricavare è modificare

:

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

con

:

-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

: Re:Immagine responsive viene tagliata
: tomtomeight 29 Dec 2018, 09:12:16

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.