Niewyświetlające się tło na na całą szerokość i wysokość ekranu.

pytanie zadane 23 stycznia 2017 w HTML i CSS przez Wojtaz Nowicjusz (240 p.)
zamknięte 23 stycznia 2017 przez Wojtaz

Witam. Otóż podczas rozpoczęcia pisania strony natrafiłem na dziwną sytuację. Otóż chcę aby po wejściu na ową stronę pojawiło się tło na całą szerokość ekranu (div TOP) i wiadomo do tego jeszcze jakiś tekst. Tło miałoby być responsywne. Jednak kiedy wstawię ten kod css z html owego tła nie ma. Pojawia się dopiero wtedy kiedy wstawię w divie top jakiś tekst i jest on tylko na wysokość tekstu. Sprawa zapewne jest banalna tylko, że w innym moim projekcie użyłem podobnego zabiegu i tło bardzo ładnie się skalowało nawet na telefonach. Zaznaczę też, że kopiowałem kod z tego działającego projektu i tu również nie działał.
Prosiłbym o jakieś podpowiedzi.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome="1" />
	
	<title>IT Service</title>
	
<style>
body {
	margin: 0 !important;
	padding: 0;
	font-size: 20px;
}

#container {
	width: 100%;
	height: 100%;
}

#top {
	background-image: url("img/macbook-577758_1920.jpg");
	background-size: cover;
	width: 100%;
	height: 100%;
}

</style>
</head>
<body>
	<div id="container">
		<div id="top"></div>
		<div id="service"></div>
		<div id="aboutus"></div>
		<div id="mail">
			<input type="text" name="imie i nazwisko" value="Imię i nazwisko">
			<input type="text" name="mail" value="mail">
			<textarea name="tekst"></textarea>
			<input type="submit" name="wyslij" value="Wyślij">
		</div>
		<div id="footer"></div>
	</div>
</body>
</html>

zamknięte