Я не могу понять почему не подключается картинка?

Question

Дмитрий Анисимов @Dmz_wow

CSS

Я не могу понять почему не подключается картинка?

помогите пожалуйста!! всегда получалось подключить ее
терпения уже на пределе

#menu-button {
    background: url('../img/Hamburgericon.png');
    width: 32px;
    height: 32px;
    cursor: pointer;
}

<div id="menu-button"></div>
вот картинка с расположением и папкой где находиться файл

Вопрос задан более трёх лет назад
152 просмотра

20 комментариев

Подписаться 1 Простой 20 комментариев

hesrun @hesrun

В инспекторе смотели по url есть изображение? Стиль описан в хтмл или в цсс файле?

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

hesrun, стиль написан в css
формат png проверял уже 5 раз что бы убедиться в очередной раз

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

Поменяйте background на background-image

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

А еще скиньте скрин окна браузера и желательно, что в инспекторе пишется в стилях для этого дива

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Dima Polos, не работает

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Dima Polos,

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Dima Polos, я уже написал что пишется для этого дива

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Dmz_wow,
я уже написал что пишется для этого дива

Где? не вижу.
F12 (в хроме), вкладка Network (или Сеть), перезагрузка страницы -> смотрим что загружается/не загружается. Должен быть запрос к картинке со статусом ответа 200

Написано более трёх лет назад

Дмитрий Анисимов @Dmz_wow Автор вопроса

Сергей delphinpro,
вот весь код css

body{
	background:#fbbe18;
}

a{
	text-decoration: none;
}
.container{
	max-width:1200px;
	margin: 0 auto;
}
#menu-button {
    background: url(../img/hamburgericon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
}
nav{
	width: 100%;
	
}
nav ul{
	list-style-type: none;
	border: 2px solid #0066FF;
  	text-align: center;
  	background-color: #33ADFF;
}
nav li{
	display:inline-block;
}
nav a{
	color: #fff;
	padding: 5px 10px;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
}

@media screen and (max-width: 700px) {
	
}

вот весь код html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Задания</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>
	<div class="container">
		<div id="menu-button"></div>
		<nav>
			<ul>
				<li><a href="">1 Задание</a></li>
				<li><a href="">2 Задание</a></li>
				<li><a href="">3 Задание</a></li>
				<li><a href="">4 Задание</a></li>
				<li><a href="">5 Задание</a></li>
				<li><a href="">Справочный материал</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

Написано более трёх лет назад

Дмитрий Анисимов @Dmz_wow Автор вопроса

Сергей delphinpro,
я не понимаю почему в #menu-button не появляется картинка

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Dmz_wow, пожалуйста, выполните эти инструкции и сделайте скриншот вкладки Сеть в средствах разработчика браузера

F12 (в хроме), вкладка Network (или Сеть), перезагрузка страницы -> смотрим что загружается/не загружается. Должен быть запрос к картинке со статусом ответа 200

Прежде, чем что-то советовать, нам нужно быть уверенными, что ваша картинка нормально грузится.

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

И еще: reset.css нужно подключать перед своими стилями

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

А еще лучше подключить вместо него normalize.css

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Сергей delphinpro,

Написано более трёх лет назад
hesrun @hesrun

В песочницу выложите свои шедевры. Так сложно что либо понять и отдэбажить какие либо проблемы codepen.com, cюда закопипастите ваше творение.

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

hesrun, вот держи на хосте rollerstore.ru

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

картинка вроде грузится. ok.
попробуйте отключить кэширование и перезагрузить страницу (не закрывая dev-tools)

Потом посмотрите (на вкладке Elements) какие стили реально применяются к данному диву.

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Сергей delphinpro, rollerstore.ru у вас на хосте картинка есть?

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Ну ёпта!!!

что же ты не сказал, что у тебя там картинка на 1000 пикселей?
Она нормально отображается. Просто отображается ее кусочек из левого верхнего угла (прозрачный).

background-size: contain решит твою проблему.

Написано более трёх лет назад
Дмитрий Анисимов @Dmz_wow Автор вопроса

Сергей delphinpro, боже спасибо просто душевное спасибо плачу от радости
я целый час не мог понять что с ней

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

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

CSS

Простой
Why transform: translateX() translateY() not work?
- 1 подписчик
- 43 минуты назад
- 8 просмотров
0

ответов
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 14 часов назад
- 68 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 15 часов назад
- 59 просмотров
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 17 часов назад
- 49 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 18 часов назад
- 61 просмотр
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 20 часов назад
- 54 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 21 час назад
- 76 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 22 часа назад
- 37 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- 16 апр.
- 112 просмотров
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- 16 апр.
- 124 просмотра
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Скрыть / убрать лишние поля в форме заказа

19 апр. 2024, в 07:30

1500 руб./в час

Взлом автомобильной программы

19 апр. 2024, в 05:01

999999 руб./за проект

Доработать телеграм бота

19 апр. 2024, в 03:52

1000 руб./за проект

В инспекторе смотели по url есть изображение? Стиль описан в хтмл или в цсс файле?
hesrun, стиль написан в css
формат png проверял уже 5 раз что бы убедиться в очередной раз
А еще скиньте скрин окна браузера и желательно, что в инспекторе пишется в стилях для этого дива
Dima Polos, я уже написал что пишется для этого дива
Dmz_wow,
я уже написал что пишется для этого дива

Где? не вижу.
F12 (в хроме), вкладка Network (или Сеть), перезагрузка страницы -> смотрим что загружается/не загружается. Должен быть запрос к картинке со статусом ответа 200
Сергей delphinpro,
вот весь код css
body{ background:#fbbe18; } a{ text-decoration: none; } .container{ max-width:1200px; margin: 0 auto; } #menu-button { background: url(../img/hamburgericon.png); width: 32px; height: 32px; cursor: pointer; } nav{ width: 100%; } nav ul{ list-style-type: none; border: 2px solid #0066FF; text-align: center; background-color: #33ADFF; } nav li{ display:inline-block; } nav a{ color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; } @media screen and (max-width: 700px) { }

вот весь код html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Задания</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <div class="container"> <div id="menu-button"></div> <nav> <ul> <li><a href="">1 Задание</a></li> <li><a href="">2 Задание</a></li> <li><a href="">3 Задание</a></li> <li><a href="">4 Задание</a></li> <li><a href="">5 Задание</a></li> <li><a href="">Справочный материал</a></li> </ul> </nav> </div> </body> </html>
Сергей delphinpro,
я не понимаю почему в #menu-button не появляется картинка
Dmz_wow, пожалуйста, выполните эти инструкции и сделайте скриншот вкладки Сеть в средствах разработчика браузера

F12 (в хроме), вкладка Network (или Сеть), перезагрузка страницы -> смотрим что загружается/не загружается. Должен быть запрос к картинке со статусом ответа 200

Прежде, чем что-то советовать, нам нужно быть уверенными, что ваша картинка нормально грузится.
И еще: reset.css нужно подключать перед своими стилями
А еще лучше подключить вместо него normalize.css
В песочницу выложите свои шедевры. Так сложно что либо понять и отдэбажить какие либо проблемы codepen.com, cюда закопипастите ваше творение.
картинка вроде грузится. ok.
попробуйте отключить кэширование и перезагрузить страницу (не закрывая dev-tools)

Потом посмотрите (на вкладке Elements) какие стили реально применяются к данному диву.
Сергей delphinpro, rollerstore.ru у вас на хосте картинка есть?
Ну ёпта!!!

что же ты не сказал, что у тебя там картинка на 1000 пикселей?
Она нормально отображается. Просто отображается ее кусочек из левого верхнего угла (прозрачный).

background-size: contain решит твою проблему.
Сергей delphinpro, боже спасибо просто душевное спасибо плачу от радости
я целый час не мог понять что с ней

Answer 1 · 2019-01-24 01:34:08

iDomanOff @iDomanOff

Блок есть на странице? посмотри в коде элемента

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2019-01-24 06:42:31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .burger-icon {
            background-image: url('img/hamburger0.png');
            background-repeat: no-repeat;
            background-position: 50% 50%;
            width: 35px;
            height: 40px;
        }
    </style>
</head>
<body>
    <nav class="page-nav">
        <div class="burger-icon"></div>
    </nav>
</body>
</html>

Например.
Я бы рекомендовал мелкие декоративные элементы делать через тег<span>.

Тогда нужно в .burger-icon добавить display: block; т.к. спан строчный.

Я не могу понять почему не подключается картинка?

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

Минуточку внимания

Войдите на сайт