Не отображается background-image?

Question

[RavenPo]

Здравствуйте. Решил сделать поблочный Landing page с использованием плагина fullPage.js. Грубо говоря встрял в самом начале, так как background-image не хочет отображаться. Когда проверяю на локальном сервере все нормально и все работает как надо, однако стоит все перенести на хостинг и background-image перестает работать. Перепробовал кучу вариантов, но ничего не помогло.

Вот структура HTML и CSS.

<content>
	<div id="fullpage">
		<div class="section">
			<div class="page_1">
				<img src="images/logos.png">
			</div>
		</div>
		<div class="section">
			<div class="page_2"></div>
		</div>
	</div>
</content>

.page_1{
	width: 100%;
	height: 100%;
	background-image: url(https://c1.staticflickr.com/5/4277/34730393064_ed97c6b0a5_o.jpg);
}
	.page_1 img{
		display: block;
		margin: 0 auto;
	}
.page_2{
	width: 100%;
	height: 100%;
	background-image: url(https://c1.staticflickr.com/5/4229/35187895970_af30ccd4d7_o.jpg);
}

P.S. Работает лишь тогда когда height ставлю в пикселях, а не процентах, но мне нужен адаптивный дизайн и в px вариант не подходит.

Answer 1

[Даниил]

Ну например 100vh
Либо js

Comments

[RavenPo]

100vh помогло, но перестал работать fullpage, однако это уже хоть что-то. Спасибо.

Answer 2

[Oleg Smich]

А если так?

$(window).resize(function() {
   $('.page_1').css('height',$(window).height());
});

Comments

[RavenPo]

К сожалению не помогло.

Answer 3

[Александр Моргунов]

Перестаньте обращаться по http запросу, чтобы загрузить изображение на сайт: изображение могут удалить, доменное имя могут заблокировать и есть еще куча причин не тянуть картинки с http с других интернет ресурсов. Сохраните изображение в лиректорию с сайтом и покажите своему css, где лежат нужные для каждого класса картинки.
P.S.: и так к слову, изображения не выводятся у вас, потому что возвращается ошибка 404. Как ее избежать я уже описал.