responsive background image resize

[KillerWorm]

Ho visto, l'immagine ora è come hai chiesto e funziona esattamente come l'esempio che hai linkato... e si ridimensiona mantenendo le proporzioni; chiaramente per proporzioni si intendono quelle nominali dell'immagine originale, non quelle dell'elemento che la contiene, infatti lo scopo del valore cover è proprio quello di mantenere le proporzioni dell'immagine ritagliandola all'interno del contenitore in modo che questa ne copra l'intero ingombro evitando quindi che si creino spazi vuoti dovuti proprio alla differenza delle proporzioni tra l'immagine e il contenitore.

A questo punto il problema si riversa negli altri elementi ed altre regole che prescindono dal comportamento dell'immagine.

(anche se non mi piace avere un valore 550px)

Non so a cosa ti riferisci

il container sottostante l'immagine non mantiene la sua posizione, appunto sottostante, e gli va sopra

Come indicato, questo dipende da altre regole; vedi, nello specifico, questa:

@media (max-width:480px) {.header-search.slider-home {height:330px;}}

In sostanza per tale media-query il contenitore .header-search.slider-home, in cui ci sta #home-image (e altri elementi), è impostato con un'altezza fissa che chiaramente va in conflitto col fatto che #home-image si estende invece con un'altezza variabile. Di fatto l'elemento #home-image sborda dal suddetto contenitore, ma il div che viene dopo, fa riferimento invece a quell'altezza fissa.

Per me la questione in oggetto ("responsive background image resize") è risolta. Il fatto è che ora devi fare i conti col resto del layout che chiaramente era studiato per comportarsi al meglio rispetto alle impostazioni originali del template. Qui però la cosa diventa più complessa rispetto l'oggetto in discussione, perché ogni cosa che vai a modificare può creare un effetto domino su varie altre regole, come in questo caso.

Personalmente non posso aiutarti di più. Posso giusto consigliarti, come già ho fatto qualche post fa, di utilizzare la console web in modo da verificare quali regole sono applicate ai vari elementi e cercare di capire come puoi modificarle per ottenere ciò che ai in mente.

Buon proseguimento.

[ac_socmel]

Poi mi creo io le varie media-queries per i testi.

per quest'anno basta
{CFCAFA7B-94B5-4C78-B572-39234FF10C7E}.png.jpg

[stardom]

per quest'anno basta

figurati, in questo tema ci sono due style.css, e se una modifica non la faccio per entrambi o se vado a toccare le numerose classi che sembrano essere doppioni, ecco che si rompe tutto. Quindi, saraà fatto male ma non lo modifico.

Tornando a Killer
1) L'immagine non si ridimensiona mantenendo le proporzioni, ed infatti ho iniziato questo post dicendo che speravo in una ridimensionamento, fino ad un punto oltre il quale lo stesso non avvenisse. Nell'esempio, il ridimensionamento è totale, a tutte le modifiche verticali/orizzontali, mentre nel mio l'immagine non si ridimensiona ma viene solamente coperta dal viewport. Inaftti devo farla entrare nell'elemento, non ridimensionarla nominalmente.
2) per padding-bottom:550px mi riferisco proprio a quello che mi hai indicato di mettere sotto al h2. Era l'unico modo per far vedere l'immagine per intero, a confermare che il punto (1) non era risolto

comunque grazie davero per l'aiuto

[ac_socmel]

la battuta non era fine a se stessa
sono quelle altezze e quel padding-bottom 550 a rovinare tutto
se li elimini migliorerà

[stardom]

@ac_socmel, avevo capito esattamente il tuo messaggio, ed infatti ti ho risposto che non posso eliminare certe cose dal CSS di questo tema, perchè ho già avuto modo di vedere come si sfasciano pagine che magari non c'entrano nulla.... o meglio, non ho tempo ora di mettermi a riscrivere il CSS di questo tema. Per ora devo agire sull'elemento in questione, poi un giorno rifaccio tutto da zero .)

[KillerWorm]

1) L'immagine non si ridimensiona mantenendo le proporzioni, ed infatti ho iniziato questo post dicendo che speravo in una ridimensionamento, fino ad un punto oltre il quale lo stesso non avvenisse. Nell'esempio, il ridimensionamento è totale, a tutte le modifiche verticali/orizzontali, mentre nel mio l'immagine non si ridimensiona ma viene solamente coperta dal viewport. Inaftti devo farla entrare nell'elemento, non ridimensionarla nominalmente.

Non concordo. Nel caso dell'uso di cover le proporzioni dell'immagine (o più precisamente il suo rapporto d'aspetto) sono sempre mantenute. Su questo non c'è da discutere. Vedi ad esempio qui come funziona la questione.

Altra cosa invece è il fatto che il contenitore dell'immagine viene coperto da qualcos'altro e per questo sembra che l'immagine venga tagliata non rispettando le proporzioni (ma sottolineo "sembra"). Questo però avviene perché tali elementi sono impostati "male" a prescindere da quel cover.

2) per padding-bottom:550px mi riferisco proprio a quello che mi hai indicato di mettere sotto al h2. Era l'unico modo per far vedere l'immagine per intero, a confermare che il punto (1) non era risolto

No, quello che ho indicato è di azzerare il valore del margin-bottom (che era di 10px) per evitare che si creasse il margine oltre il contenitore dell'immagine, ed eventualmente impostare quei 10px come padding anziché come margin.

Chiaramente per estendere l'altezza puoi impostare un qualsiasi valore come hai fatto (anche se mi sembra un accrocchio), ma in questo caso (secondo quanto era stato concepito per il layout originale) la cosa si sfascia proprio perché gli elementi in gioco vanno a sovrapporsi quando il viewport si riduce; cosa che prima non si notava perché l'altezza del contenitore era legata a quella dell'immagine stessa (in quanto elemento <img> e non background).

Ora, il consiglio per risolvere te lo abbiamo dato ma sembra quasi che tu non voglia prenderlo in considerazione.

Senza offesa ma in tal caso vale il detto "non c'è peggior sordo di chi non vuol sentire".

Sia io che ac_socmel ti abbiamo indicato esattamente dove sta la causa del problema, ed è lì che bisogna intervenire.

Per risolvere devi lasciare l'altezza automatica per l'elemento .header-search.slider-home
In altre parole devi rimuovere tutte quelle regole che fissano la sua altezza a 330px, cioè devi rimuovere tutta quella pappardella di media queries (vedi screenshot postato da ac_socmel) in modo da lasciare il valore auto di default per la proprietà height di quell'elemento.

Questo a grandi linee, poi chiaramente si può intervenire in mille altri modi per risolvere.
Vedi un po' se questo basta.




EDIT: ho letto ora gli ultimi post.

non posso eliminare certe cose dal CSS di questo tema, perchè ho già avuto modo di vedere come si sfasciano pagine che magari non c'entrano nulla.... o meglio, non ho tempo ora di mettermi a riscrivere il CSS di questo tema. Per ora devo agire sull'elemento in questione, poi un giorno rifaccio tutto da zero .)

Se non vuoi perdere/impiegare tempo per eliminare regole (anche se forse sarebbe meglio per una questione di pulizia del codice) puoi semplicemente metterci una nuova regola del tipo:

.header-search.slider-home{ height: auto !important;}

e ciccia

[stardom]

io sarò sordo ma voi siete ciechi ma non lo vedete che l'immagine è tagliata? Infatti, anche dagli esempi indicati, mi pare che bisogna usare contain e non cover. Perchè lo scopo è ridimensionare l'immagine a prescindere che ci siano elementi a coprirla o meno. Su quelli ora ci lavoro, e tolgo le mediaqueries, ma è chiaramente NON dimensionata, è solo adattata alla meglio.
(praticamente mi serve un comportamento cover per schermi normali, ed uno contain per i piccoli)

Se ti serve comunque spostare verso l'alto quell'elemento h2 puoi usare un padding da applicare allo stesso h2 o al div contenitore.Una cosa del genereadding-bottom: 10px;

[KillerWorm]

io sarò sordo ma voi siete ciechi ma non lo vedete che l'immagine è tagliata?

Perdonami ma questo è il normale comportamento del cover che a differenza di contain fa in modo di riempire l'intero contenitore evitando che rimangano eventuali spazi vuoti.

Questo è ciò che hai chiesto fin dall'inizio, infatti hai indicato:

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.

Se il problema era che l'immagine non riempiva interamente il container, questo effetto lo avrai comunque se utilizzi contain.
Da qui era dato per scontato che ti serviva usare cover.

Inoltre tutti gli esempi che hai linkato sono impostati proprio col cover.

come in questo esempio.
...
per esempio questa immagine
...
uno per esempio è questo.
...
Sto anche seguendo questo tutorial.
...
vorrei solo realizzare questo: immagine interamente adattabile a qualsiasi altezza/larghezza
...
si ridimensioni senza mai venir tagliata (come nell'esempio)

In tutti quei casi la funzione principale del cover è riempire l'intero contenitore, tagliando opportunamente l'immagine in modo che non si creino mai degli spazi vuoti, ma mantenendone sempre l'aspetto di proporzione... stop.

Perchè lo scopo è ridimensionare l'immagine a prescindere che ci siano elementi a coprirla o meno. Su quelli ora ci lavoro, e tolgo le mediaqueries, ma è chiaramente NON dimensionata, è solo adattata alla meglio.
(praticamente mi serve un comportamento cover per schermi normali, ed uno contain per i piccoli)

Il cover (ripeto per l'ultima volta) fa esattamente il suo dovere "riempie la totalità del contenitore mantenendo inalterate le proporzioni dell'immagine"; il problema sono proprio quegli elementi che la coprono e non dovrebbero, a prescindere dalla dimensione del viewport.

Se poi tu vuoi usare contain (che ti lascerà eventuali parti vuote) ad una certa dimensione del viewport, allora è un'altra questione ma, abbi pazienza, non era ciò che hai chiesto fin dall'inizio.

Due sono le cose, anzi tre: ho ti sei espresso in modo inadeguato oppure noi abbiamo capito male, o entrambe le cose.

Ad ogni modo, fai le tue prove e vedi se il problema si risolve.

Per quel che mi riguarda, io concludo qua. Per me le soluzioni ti sono state date con tutte le indicazioni per capire dove sta il problema e risolvere; se vuoi, puoi farne un buon uso, altrimenti fai un po' tu.

Buon proseguimento.

[stardom]

....si concludiamo qui, tanto ho capito che non si può fare.
In tutti gli esempi che hai riportato, l'immagine si ridimensiona sia verticalmente che orizzontalmente, grazie a cover, ma nel mio caso lo faceva solo contain (pur mantenendo spazi vuoti in un wide screen). Nel mio caso il cover non mi mantiene affatto le proporzioni. Mistero. Per questo ho aperto il thread dicendo che non mi funzionava. Evidentemente, ci sono altre porzioni di codice (ben nascoste) che influiscono.
Ma, oltre alle suddette mediaqueries, non vale la pena sbattersi per una cosa evidentememte scritta male. Dopo tutto il risultato è accettabile.
Ringrazio per la grande pazienza avuta da parte vostra. Possiamo chiudere il thread.