@ZZiliST
Изучаю JS, CSS, HTML, PHP

Почему не работает background-image при тестировании на мобильных устройствах?

Здравствуйте. Такая проблема... Верстаю адаптивный сайт. Разметка самая обычная.
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" style="background:#fff;">
		<div class="home-wrapper">
			<div class="top-line-one-px"></div>
			<div class="top-menu-canvas"></div>
		</div>
	</body>


Стили:

.home-wrapper{
	width:100%;
}

.top-line-one-px{
	width:100%;
	height:1px;
	background:#b7b7b7;
}

.top-menu-canvas{
	width:100%;
	height:43px;
	background-image:url(img/top-menu-canvas-bg.png);
	background-position:center center;
	background-repeat: repeat-x;
}


Пытаюсь протестировать через Google Chrome -> Device toolbar. Все отображается хорошо до того момента, пока я не уменьшаю разрешение до 489px. При таком разрешении, он не отображает background-image:url(img/top-menu-canvas-bg.png); Не могу понять почему. Хотя если напишу background:#000; то все отрабатывает. В чем проблема? Может подскажете решения для тестирования адаптивности на локальном пк? Спасибо...
  • Вопрос задан
  • 491 просмотр
Решения вопроса 1
@bpGusar
*spoiler*
поиграйся с background-size, может поможет
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mrbagfreeman
@mrbagfreeman
Начинающий быдло кодер
Для начала советую вам подключить фреймворк bootstrap и препроцессор sass. К sass подключить миксин media. И через него верстать адаптивный сайт. Во первых повышается скорость загрузки, во вторых упрощается адаптивная верстка.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы