Почему не работает свойство backgroung-image?

Question

[Nerevar96]

В HTML коде, через тег img картинка загружается, и все работает корректно (значит путь верный)


Но в CSS коде, не происходит вообще ничего, при этом в редакторе кода путь к картинке подсвечивается странно (белые буквы после слешей). Стили тоже подключены, потому что фонт-сайз работает (я там для теста прописал текст)

Дело в настройках vs code?

Comments

[Nerevar96]

Решил упороться и заменил все слеши в пути к кантинке на зеркальные, ссылка стала выделяться нормально (все зеленое), но на результат это никак не повлияло, по прежнему ничего не работает


И ладно, была бы просто иконка с отсутствующим изображением (как если через тег img делать), но у меня на странице вообще ничего

[FeST1VaL]

Nerevar96, а размеры у блока есть?

[Nerevar96]

FeST1VaL, Пробовал делать размеры думал поможет, поставил 300 на 200 для теста, но все равно не получилось

[FeST1VaL]

Nerevar96, попробуйте убрать пробелы в ссылке (переименовать папку) или заменить на %20.
вы так же в devtools можете посмотреть на стили этого блока и навести на ссылку и возможно поймете в чем ошибка

[FeST1VaL]

Nerevar96, а так же вы можете сократить ссылку к примеру "../im/bg.jpg"

[Сергей delphinpro]

Пути так не указывают. Вернитесь к изучению базовых основ.

Answer 1

[Никита Степанов]

Так ты просто в url напиши "../img/bg.jpg" :3

Answer 2

[Dimava2]

src должен содержать URL
URL должен содержать протокол (https/http/ftp/file/...) если он не относительный
Чтобы увидеть настоящий URL картинки - откройте в браузере саму картинку (перетаскиванием картинки в пустую вкладку), будет что-то вроде

file:///C:/ProgramData/NVIDIA%20Corporation/Downloader/latest/NVI2/uninstall_btn_pressed.png

, вот это в src и вставляйте

Но всё-таки лучше используйте относительные ссылки

Но вообще говоря, раз уж вы пишете html, лучше используйте локальный сервер:

1. (VSCode) live-server-preview - позволяет отрыть html прямо в VSCode, в правой половине редактора, с автообновлением
   
2. (VSCode) https://marketplace.visualstudio.com/items?itemNam... - то же самое, но запускает в браузере а не редакторе
   
   
3. (Chrome) https://chrome.google.com/webstore/detail/web-serv... - позволяет запустить простенький сервер прямо из браузера не устанавливая никаких программ
   
   

(впрочем, использование file:/// тоже может иметь смысл, например у меня самопальный просмотрщик картинок именно на них работает)