Background size: cover i contain problem

Web dizajn i grafika
1

Pozdrav, imam header koji je 600px visok i koristi pozadinsku sliku za svoju pozadinu.
Slika je 1600x600px, tako da kad je širina stranice preko 1600 koristim cover, a sve ostalo je contain.

/* ===== HEADER ==== */

header{
	height: 600px;
	min-height:600px;
	width:100%;
	min-width:100%;
	background-attachment:scroll;
	background-image: url(../images/headerBG.jpg);
	background-repeat: no-repeat;
    background-size: contain;
	
}
#bgOverlay{
	position: absolute;
	top: 60px;
	left: 30%;
}

/* ==== MEDIA QUERIES 	==== */
@media only screen and (min-width:1600px){
	header{background-size: cover;}
}

Taj dio radi, ali kad risajzam browser, header se ponaša čudno i više nije na 600px. To se vidi, pošto je preko headera apsolutno pozicionirana jedna slika koja je visoka 500px.

Evo link, pa probajte risajzati. Najvjerovatnije sam zaboravio neku osnovnu stvar, kako to obično i ide.

2

Ne vidim u čemu je problem?
U Chromeu, dodao sam u CSS:

header{
	height: 600px;
	min-height:600px;
	width:100%;
	min-width:100%;
	background-attachment:scroll;
	background-image: url(../images/headerBG.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	[B][color="#FF0000"]background-color: #f00;[/color][/B]
}

… i kako resizam browser, vidim po boji da je visina headera uvijek ista.
Nisam isprobao u drugim browserima.

Ili želiš da visina slike u headeru bude uvijek ista?

3

Kad si resizao browser, ova manja slika prelazi preko headera, što znači da header nije 600px, jer da je, slika od 500px ne može prelaziti ispod. To meni nije jasno.

4

Treba umjesto contain, napisati ovo: background-size: auto 600px;

5

Pardon. background-size: 100% 600px