Ustalenie procentowej wysokości obrazu tła na stronie nie działa prawidłowo

Wiem, że pytanie dotyczy zupełnych podstaw css, ale z jakiegoś powodu nie wyświetla mi diva z tłem w chromie.

html, body{ height:100%; }
div { background-image:...;
        height:100%; background-size:cover; itd;
  }

Gdy w wartość height w divie daję np. 670px, to tło mi wyświetla, spoko, ale jak daję w procentach, to lipa. Nie wiem, to musi być jakaś bzdura, ale tym bardziej nie rozumiem dlaczego mi taka prosta rzecz nie działa.

edit: tzn. najbardziej mnie wpienia, że wszędzie w necie w przykładach to rozwiązanie śmiga. Tym bardziej nie rozumiem dlaczego u mnie nie działa.

Czy nie wyświetla Ci diva wcale, czy jest div, ale nie ma tła?
Po drugie - wrzuć kod na http://jsfiddle.net i podeślij link - wtedy coś pokombinujemy.

html,body {
	height:100%;
}
body {
	
	overflow:hidden;
	position:relative;
	width:100%;
}
#div_img1
{
	display:block;
	background-image:url("laptop-nature1.PNG");
	min-height:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
		
}

html:

<div id="div_img1">

</div>

Wybaczcie brak zrzutów, ale tak:
Strony testowej z publicznego serwera wolę nie pokazywać, bo tam wrzucam tylko wtedy stronkę, jeśli działa. Natomiast zrzuty? Nie wiem czy pomocna jest pusta biała strona. Jedno co moim zdaniem jest sens dopowiedzieć to to, że div jest. Nawet skrypt jQuery mi na nim działa, bo sprawdziłem. Jedyne co, to że nie wyświetla mi obrazka. Obrazek tła jest widoczny tylko wtedy, gdy dam height np 670px. Jak daję height:100% lub min-height:100%, to lipa. Nie widać i tyle.

edit: Tzn. nie dokończa pusta biała strona, bo inne elementy wyświetla wzorowo. Tylko jak daję w css ten nieszczęsny height na 100%, to div jest, ale nie wyświetla obrazka.

edit2: Wiecie co? Zabawne, że teraz zakomentowałem właściwość background-image i dałem background-color:red; strona jest cały czas biała. Co jest grane (u licha) ?
edit3: No ta.... jasne... teraz zmieniłem z min-height:100% na min-height:670px i background-color:red chula, a jakże;-)))

edit4: przekopiowałem kod prosto z mojego css do jsfiddle i na jsfiddle min-height:100% działa spokojnie. Moim zdaniem problem nie tkwi w kodzie. Bo jeżeli w px działa to i w % powinno.

przekopiowałem kod prosto z mojego css do jsfiddle

podeślij link

Okej, udało mi się zrobić jeden zrzut. Wybaczcie bałagan jeśli chodzi o inne karty.

edit: A i jeszcze jedno. W html ten pierwszy obrazek ma akurat display:none, ale jak jest display:block to właśnie też nie działa. Na zrzucie jest akurat none, bo to jest ułamek sekundy, w którym jquery zadaje display:none;

spróbuj wpisać
background-repeat: no-repeat; background-size: 100% 100%; background-size: auto;
z html, body to wywal, ew. ustaw margin, padding na 0

Nieee, też nie działa. Ale jak? background-size:100% 100%; i znowu background-size:auto; czy to nie jest bez sensu?

Widzę, że twój element ze screena jest w ul li
Nie używasz może floata?

bez spojrzenia na źródło ciężko wróżyć, spróbuj jeszcze tego
https://www.w3schools.com/howto/howto_css_full_page.asp

boryss napisał(a):

Widzę, że twój element ze screena jest w ul li
Nie używasz może floata?

Tzn. całość jest jeszcze w bootstrapie, więc może coś w tym jest.

css

html,body {
    height:100%;
}
body {
 
    overflow:hidden;
    position:relative;
    width:100%;
}
#div_img1
{
    display:block;
    background-image:url("laptop-nature1.PNG");
    min-height:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
 
}

.clearfix::after {
display: block;
content: "";
clear: both;
}

html

<ul class="clearfix">
  <li><div id="div_img1"></div></li>
  <li><div id="div_img2"></div></li>
  <li><div id="div_img3"></div></li>
</ul>

@Edit
a jeżeli to ma być zawsze % wysokości przeglądarki to dlaczego by nie użyć 100vh zamiast 100%?

Aaa, no i wszystko janse. Po prostu chodzi o to, że min-height:100% czeka na kontent, który go wypełni. Dodałem kontent tzn. jakiś tam sobie lorem ipsum i tło się zrobiło. Pytanie jednak, jak zrobić aby to tło było, ale bez tekstu, bo sęk w tym, że ja tego tekstu nie chcę mieć. Miałem natomiast nadzieję, że przy min-height moja stronka będzie się sama dopasowywać, to większych ekranów.

Tak czy siak, nie będę już wymieniał wszystkich osób z nicków, ale dzięki waszej pomocy się wyjaśniło. Tzn. nadal mam nie wielki problem, bo ja to tło chcę bez tekstu, ale dobrze wiedzieć i to, co już wiem.

Hehe, za to teraz mam problem, którego już nie pokaże, bo musiałbym film nagrać. Po tych wszystkich drobniutkich zmianach w css, okazuje się, że div, który mi wjeżdża na stronę - tekst na tym divie pojawia mi się z 5 sekundowym opóźnieniem. Ja nie mogę, jeden problem za drugim.

edit: Dobra, rozwiązałem kolejny problem. Oczywiście jeszcze raz dziękuję Wam Wszystkim za pomoc.