Не отображается картинка, что делать?

Question

[sweet1232]

.toggle {
		background: url(menu.png);
	}

Не отображается картинка. путь к файлу правильный и названия файла тоже. тот же самый код в html в теге style уже работает

Comments

[Сергей delphinpro]

путь к файлу правильный

Да неужели? Что по этому поводу говорит инспектор сети в браузере?
Вторая причина – не заданы размеры элемента, и он схлопнут до нулевых.

[sweet1232]

Сергей delphinpro, там не полный код, размеры заданы. + тот же самый код в html в теге style уже работает. в консоли ошибок нет.

[Сергей delphinpro]

sweet1232, на вкладке "сеть" запрос картинки как выглядит?

[sweet1232]

Сергей delphinpro, нужных картинок там нету

[sweet1232]

Сергей delphinpro, т.е. в списке нету самих картинок и следственно ошибок

[Сергей delphinpro]

sweet1232, а скриншотик можно?
Если нет запросов картинок прописанных в css файле, то напрашивается вывод, что у вас не подключен css файлик.

[Сергей delphinpro]

Или может быть ошибка в имени класса. Тогда стиль не применяется и картинка не запрашивается. Прямо гадание какое-то. Кофе что ли сварить...

[sweet1232]

Сергей delphinpro, css подключен. и код в нем работает. размеры для класса toggle задаются, только сама картинка не загружается

[Сергей delphinpro]

sweet1232, ну вываливайте код index.html и css
Посмотрим, что вы там накодили.

[sweet1232]

html

<header>
			<a href="#" class="logo" >Logo</a>
			<div class="toggle"></div>
			<ul class="navigation">
				<li><a href="#" class="active">Главная</a></li>
				<li><a href="#">Карты</a></li>
				<li><a href="#">F.A.Q</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>
		</header>

css

.toggle {
		position: relative;
		width: 48px;
		height: 48px;
		cursor: pointer;
		background: url(menu.png);
		background-size: 30px;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 1000;
	}
}

	.toggle.active {
		background: url(close.png);
		background-size: 25px;
		background-position: center;
		background-repeat: no-repeat;
	}

js

let menuToggle = document.querySelector('.toggle');
		menuToggle.onclick = function() {
			menuToggle.classList.toggle('active');
		}

2 закрывающие скобки в классе toggle в css потому что он находится в медиа запросе

Answer 1

[Денис Инешин]

Обычно это значит что ваш CSS файл лежит не в той же директории где картинка. Возможно вам нужно написать что-то вроде url('../menu.png')

Comments

[sweet1232]

не помогло

[user-agent]

sweet1232, скинь дерево директории папки проекта

[sweet1232]

user-agent,

[Николай Угольников]

sweet1232, в css папок нет?

[sweet1232]

Николай Угольников, нету

Answer 2

[user-agent]

.toggle {
    background: url(../../menu.png);
}

гугли - Абсолютные и относительные ссылки

Comments

[sweet1232]

не помогло