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

Odpowiedz Nowy wątek
2015-01-23 13:43
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.

edytowany 1x, ostatnio: dzek69, 2015-01-23 13:48
używaj tagów kolorujących składnię - dzek69 2015-01-23 13:48

Pozostało 580 znaków

2015-01-23 13:48
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)


edytowany 1x, ostatnio: dzek69, 2015-01-23 13:49

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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