Dynamiczne tło

Witam, mam problem ze zrobieniem tła. Konkretnie miałoby się składać z dwóch obrazków, które przy odpowiedniej rozdzielczości są obok siebie, a zwężając ekran wchodzą jeden pod drugi.. Bawie się z tym już jakiś czas i niestety nie jestem w stanie tego ogarnąć. Obrazki zamiast chować się pod siebie - nachodzą na siebie..

Kolejnym problemem jest ich skalowanie, jak zrobić żeby zawsze zachowywały swoje proporcje ? Wcześniej miałem zrobione tło dla body, a dlugi obrazek dla html i dzięki repeat były obok lub pod sobą, ale wtedy skalowanie padało i w niektorych rozdzielczościach wyglądały komicznie.

EDIT:

Poradziłem sobie z tłem. Przechodzi tak jak chciałem itd. Zrobiłem to w bootstrap. Jednak wciąż pozostaje problem skalowania, ma ktoś może skrypt, który będzie skalował foty do wielkości diva zachowując przy tym proporcje?

Jednak wciąż pozostaje problem skalowania, ma ktoś może skrypt, który będzie skalował foty do wielkości diva zachowując przy tym proporcje?

<div><img src="" width="100%" /></div>

Prawie dobrze.. Proporcje są zachowane, jednak przy węższych rozdzielczościach tło nie dociaga się do dołu strony. Może źle to wyżej sformułowałem, więc sprecyzuje:
mam w tle 2 divy, każdy 50% szerokości i 100% wysokości. Wstawiłem obrazki, nadałem im width:100% i przy wiekszości rozdzielczości wygląda ładnie, jednak są takie w których widać tło body na dole strony. Obrazki mają zajmowac 100% wysokości diva i ewentualnie mogą być lekko przycięte, jednak nie mogą się nienaturalnie rozciągać..

Z tego co wiem to w HTML 5 istnieje takie coś jak background-image: z parametrem cover. Automatycznie dopasowuje obrazek i wypełnia div. Polecam poczytać o tym bo wiem też ze da się to zrobić z flaga oznaczającą brak rozciągania, tzn z przycinaniem obrazka. Sam kiedyś miałem podobny problem, ale się poddałem bo u mnie w grę wchodził jeszcze obrót diva. W razie pytań pytaj :D