responsive background image resize

[stardom]

so che il topic è ormai obsoleto e risolto da secoli, ma io ho ancora un problema: per una immagine full-background sto cercando di mantenere il ratio height/width iniziale, fino ad un punto oltre il quale rimane fissa, come in questo esempio.
Nel mio caso invece il ratio funziona ma fino in fondo, quindi al minimo schermo responsive l'immagine è talmente ridotta che non riempie interamente il container. Eppure ho un codice standard:

{background:url('immagine.jpg') no-repeat center center cover fixed;}

Come faccio a mantenere l'immagine sempre piena?

[KillerWorm]

Come tu stesso hai impostato nel tuo codice, la regola principale è background-size con valore cover. Bisogna capire esattamente cosa intendi per "fino ad un punto oltre il quale rimane fissa". In quell'esempio per ottenere quell'effetto non c'è nulla di più se non quella regola. Il valore cover infatti fa in modo che l'immagine sia "ritagliata" per coprire l'intera area disponibile dell'elemento su cui è applicata, mantenendo il rapporto delle dimensioni (così come hai indicato tu stesso). E' chiaro che l'effetto finale è influenzato sia dal rapporto stesso dell'immagine (quindi i valori originali di larghezza e altezza dell'immagine) sia dalle dimensioni (larghezza e altezza) che può assumere l'elemento su cui è applicata la regola. Se vuoi fissare un limite minimo, puoi impostare qualcosa del tipo min-width e/o min-height per il body o per l'elemento a cui applichi quel background.

[stardom]

fino ad un punto oltre il quale rimane fissa

per esempio questa immagine non mantiene il ratio, ma viene ristretta

io quindi vorrei un effetto che inizialmente rimpicciolisce, e poi restringe

[KillerWorm]

In quei link c'è un'immagine impostata per il background del body, mentre nel tuo caso stai usando un elemento <img> da quel che vedo. Non puoi pretendere che funzioni allo stesso modo. Molto semplicemente, se vuoi che l'immagine riempia l'intero body della tua pagina, dovrai applicarla appunto come background del body e impostargli il cover.

[stardom]

...ma infatti non deve riempire l'intero body della pagina, solo quella porzione di header

[KillerWorm]

Allora non capisco dove sta il problema. Negli esempi che hai linkato non c'è alcun punto oltre il quale l'immagine rimane fissa; è semplicemente un background impostato col valore cover che fa tutto il lavoro. Nel tuo caso invece vedo un elemento <img> (quindi non un'immagine impostata come background). Non so dove tu abbia applicato quel css che indichi nel primo post, ma il primo passo è appunto impostare quell'immagine come background dell'elemento in questione, non usando un elemento <img>... da lì non si scappa.

[stardom]

ho incluso un allegato, il problema è che in modalità responsive l'immagine non riempie lo spazio. Nell'esempio che avevo indicato invece ci riesce... quindi "cover" non è sufficiente..

[KillerWorm]

Credimi, ho capito benissimo dove sta il problema. Rileggi bene ciò che ti ho indicato:

Nel tuo caso invece vedo un elemento <img> (quindi non un'immagine impostata come background). Non so dove tu abbia applicato quel css che indichi nel primo post, ma il primo passo è appunto impostare quell'immagine come background dell'elemento in questione, non usando un elemento <img>... da lì non si scappa.

Riesci ad applicare un'immagine come background? Inizia da lì

[stardom]

mi ero accorto anche io che fosse una img invece che una classe, ma quello che mi confonde è quanto segue:

l'html della pagina è
<div class="" id="home-image">
<img class="img-responsive" src="airplane.jpg" />
</div>

e siccome la classe esiste come
#home-image img-responsive {background:url('airplane.jpg') no-repeat center center cover fixed;}

allora in teoria ho un doppio, quindi sarebbe sufficiente togliere la img dal <div> per avere l'immagine impostata come background.
Ma allora perchè non funziona, anzi ci mette anche più tempo a caricare?
Se poi scrivo <div class="img-responsive" id="home-image"> allora l'immagine non viene proprio caricata

[KillerWorm]

La cosa non funziona perché commetti diversi errori.

- Se togli l'elemento <img> il div (#home-image) che lo contiene ha un effetto collassamento (quantomeno su desktop) perché gli elementi che stanno dentro (a parte <img>) hanno position:absolute che li rimuove dal normale flusso dei contenuti.

- In qualunque caso, per logica presumo che quel div (che appunto ha id #home-image) debba contenere giusto l'elemento <img>. Perché ci sta altra roba dentro? Ce l'hai messa tu arbitrariamente o il template lo consente?
In questo caso, se vuoi che l'elemento non collassi, andrebbe tolto il position:absolute dagli elementi figli. A quel punto puoi impostare l'immagine come background.

- Oltre questo, stai sbagliando ad applicare il valore cover in quel modo (dove hai visto che si applica così?). Se vuoi usare la forma contratta per la proprietà background fai una ricerca del tipo "background cover shorthand" e vedi come va applicato quel valore.
Ti consiglio inoltre di utilizzare la console web del tuo browser (premi F12) che ti permette anche di verificare se le regole CSS definite per i singoli elementi sono valide e vengono correttamente applicate.
Può esserti utile anche passare il tuo CSS in un validatore (ad esempio questo) per verificare se ci sono errori di qualche genere.


Io so come risolvere ma vorrei che ci arrivassi da te.
Magari fai qualche prova e vedi che riesci a combinare.
Fai sapere, buon proseguimento.