RavenPo
@RavenPo

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

Здравствуйте. Решил сделать поблочный 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 вариант не подходит.
  • Вопрос задан
  • 1145 просмотров
Пригласить эксперта
Ответы на вопрос 3
casusbelli-dn
@casusbelli-dn
Вникаю по чуть-чуть
Ну например 100vh
Либо js
Ответ написан
SciTec
@SciTec
Ну такое...
А если так?
$(window).resize(function() {
   $('.page_1').css('height',$(window).height());
});

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы