Pierwszy obrazek na stronie 100% szerokości i 100% wysokości

0

Witam serdecznie. Chciałbym uzyskać następujący efekt: przy wejściu na stronę pojawia się na cały ekran background, który zdefiniowałem w css. Czyli 100% wysokości i 100% szerokości w zależności od rozdzielczości osoby odwiedzającej. Podobny efekt można sprawdzić na tej stronie: http://www.styleshout.com/templates/preview/Ceevee10/

Chodzi o to, że gdy zacznę scrollować na dół myszką, to strona będzie dalej się przewijać (nie chcę statycznego tła na całą stronę). Ważne jest ustawienie automatycznie rozmiaru diva z tym obrazkiem w tle na górze strony.

Co udało mi się zrobić?

header {
  background: url(../images/tlo-head.jpg) no-repeat top center;
  width: 100%;
  background-size: 100%;
  max-height: 960px;
  text-align: center; 
  height: 100%;
}

...ale ciągle na dole jest biały pasek. Nie chcę ustawiać wysokości na sztywno, aby dla mniejszych ekranów zdjęcie nie było przesadnie wysokie. Proszę o pomoc. Pozdrawiam.

1
element {
height: 100vh;
}

Support: http://caniuse.com/#search=vh
(na dole masz też workaround, żeby naprawić buga w starych urządzeniach mobilnych z iOS Safari)

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0