Zdjęcia jako tło CSS3

Witam,

Chcę ustawić na swojej stronie zdjęcie jako tło które będzie na całą stronę. I tu mam problemy, ponieważ każdy sposób jaki wykorzystałem nie jest responsywny.

Pierwsza metoda jakiej użyłem to :

width: 100%;
	height: 100%;
	background:url(images/top.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; 

Wszystko było by fajnie gdybym posiadał tam jakiś tekst który by rozciągnął obrazek na wysokość, w tej metodzie tło jest tylko tam gdzie są obiekty, nie jest do końca strony.

Potem użyłem

width: 100%;
	height: 100%;
	background:url(images/top.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; 
    min-width: 100%;
    min-height: 100%; 

Tu już lepiej bo tło działało, tyle że po zamknięciu DIV'a i otworzeniu nowego z drugim tłem pod spodem drugi div wskoczył na pierwszy... PLUS tragedia z resposywnością, na tabletach obrazek nie jest do końca.

Tak więc pytanie do was (ponieważ nie chcę używać żadnych frameworków) czego brakuje w tym CSS'ie aby tło było na całą stronę, aby było responsywne i aby można było pod tym tłem wsadzić coś innego.

bo przecież jak mam width: 100%; i height: 100%; to nie utworzę @media z tymi samymi parametrami...

Pozdrawiam

Nie bardzo wiadomo co chcesz zrobić, wyciąłeś selektor CSS i nie wiem do jakiego elementu chcesz to zapiąć.

Najlepiej to wrzuć szkielet HTML + CSS + zalinkuj gdzieś obrazek w tle (wrzuć np. na imgur.com) na jakiś np. jsbin.com - będzie widać co kombinujesz.

na pewno brakuje:
background-repeat:no-repeat;

i tak przy okazji dla powtórki:
wysokość tła obrazu:
background-size:contain;
szerokość tła obrazu:
background-size:cover;

Ustawiasz to dla elementu body? Dobrze jest ustawić dla body width i height na 100%.