adattare l'immagine si sfondo alla dimensione del box

[Rocky88]

allora ho un contenitore div che occupa il 100% della pagina in larghezza (width), gli ho impostato un'immagine di sfondo, e vorrei che questa immagina occupo il 100% del contenitore (width). Ora il punto è che al ridimensionamento della pagina vorrei mi si ridimensionasse anche l'immagine, il problema ce l'ho con l'altezza. Questa e il codice interessato:

[html]
<style type="text/css">
#conteiner #header {
background-image: url(img.JPG);
background-size: 100% auto;
color: #FFF;
background-repeat: no-repeat;
}
</style>
[html]

gentilmente nelle risposte scrivete il codice, cosi è tutto più chiaro e semplice. Il mio non va , o meglio, per la larghezza e ok, ma l'altezza non la modifica, resta una striscia sottile che contine giusto una parola "header".

[tigroneveloce]

background: url(img.JPG);
background-position: center center;
background-size: cover;

[Rocky88]

non va comunque...altre soluzioni?

[tigroneveloce]

L'altezza del div dunque intendi?
Se si, l'altezza del div non è determinata dall'immagine di sfondo; o si adatta al contenuto o la imposti direttamente e la gestisci con js o le media queries.

[Rocky88]

si bravo, l'altezza del div...gli ho impostato il width al 100% cosi si adatta alla pagina ed e ok xke ogni volta che la ridimensione si adatta, ma per l'altezza come posso fare?, cioè metti pure che gli imposto io l'altezza, dopo come faccio a farla diminuire in proporzione? cioè con la larghezza e tutto ok non mi da sto problema, riduco la pagina e in automatico mi si adatta....

[les2]

dandogli un'altezza minima non risolvi?

[tigroneveloce]

Se ti basta cambiare l'altezza in base a degli step puoi usare le CSS media queries

esempio:
@media screen and (min-width: 415px) and (max-width: 599px) {
#div { height: 300px }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
#div { height: 400px }
}


Se vuoi invece un resize "graduale" occorre scrivere una funzioncina js che rileva la larghezza del div e poi ricava e applica l'altezza tramite la divisione della larghezza per un dato rapporto di dimensioni; funzioncina che deve essere avviata al load del documento e ad ogni evento resize.

[Rocky88]

ho da poco cominciato con HTML e CSS, fammi un esempio di una possibile funzione js e come la devo inserire

[tigroneveloce]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
function adatta_altezza() {
$('#div').css('height',$('#div').width()/1.77);
}
$(document).ready(function() {
adatta_altezza();
});
$(window).resize(function() {
adatta_altezza();
});
</script>

Non impostare l'altezza da css.
La funzione ti mantiene un rapporto 16/9 mediante il valore 1.77 (se vuoi un 4/3, imposta 1.33 oppure 2.33 per un 21/9 e così via...)
Se vuoi impostare una soglia minima e massima puoi settarle da css (min-height e max-height).
Se l'immagine background è in cover (come ti ho scritto nel primo post), essa manterrà il suo aspect ratio e rimarrà sempre centrata riempiendo il div (se imposti come rapporto nella funzione lo stesso dell'immagine allora la vedrai interamente senza perderne delle parti).

[acir]

OMG abbastanza orribile l'ultima soluzione.
Il div dev'essere a tutto schermo / occupare tutto lo spazio in altezza e larghezza del padre?
Se si potresti usare vh / vw come unità di misura, alternativamente un bel position absolute (rispetto al padre che ha posizionamento relativo) e larghezza ed altezza 100%

[IAmZak]

ma non ti basta un background-size:100% 100% ?