Zdjęcie w tle dopasowane do wielkości okna

Question

Witajcie.

Od 2 godzin głowię się nad tym jak zrobić efekt taki jak na tej stronie: http://ottavio.kleis.agency/index.html

Chcę aby moje zdjęcie było dopasowane do wysokości okna i aby zawsze zajmowało 100% szerokości i 100% wysokości strony, następnie po scrollowaniu w dół ma się pokazać zawartość.

Próbowałem na różne sposoby, w najlepszej możliwej sytuacji udało mi się to, lecz każdy div dodany zaraz pod divem ze zdjęciem w tle lądował w środku niego, a nie pod nim... (https://jsfiddle.net/p8txb8aw/1/)

Pomózcie...

Comments

Jeszcze jedno małe pytanie.

Jak ustawić aby przy zmniejszaniu okna przeglądarki obrazek zawcze był na środku wzgledem osi X?

Answer 1

Sprobuj background-size:cover; zaraz pod bacground-image:url(...); Ustaw to jako background diva o height:100vh; i width:100vw;

Answer 2

robisz diva 100vh x 100vw dajesz mu tło wraz z background-size: cover;

 

a divy ładują się na siebie bo dałeś position absolute, możesz zamienić na relative

Answer 3

bootstrap jest rozwiązaniem

Comments

XDD