Почему мое фоновое изображение не отображается на моем github.io?

Question

Я включил 2 svg изображения для моего фона, одно сверху и другое снизу. На моем локальном хосте (работающем сервере) они появляются без проблем, но теперь, когда они загружены на github, они вообще не отображаются. Я не знаю, что не так, поскольку все ресурсы (папка с изображениями) правильно загружены. Chrome показывает эту ошибку: 2 GET https://ruth9403.github.io/assets/images/bg-top.svg 404 enter image description here

Я новичок, просто делаю свои первые попытки веб-страниц: 'v, а также новичок в github , Это мой репозиторий github: https://github.com/ruth9403/pricing-toggle-hamburger.github.io

И это мой URL-адрес github для проекта: https://ruth9403.github.io/pricing-toggle-hamburger.github.io/

Большое спасибо за ваше время и ваша добрая душа!: D введите описание изображения здесь

Answer 1

У вас есть проблема с вашим путем. Ваш CSS файл находится в папке assets. И ваш абсолютный путь CSS после разрешения указывает на https://ruth9403.github.io/pricing-toggle-hamburger.github.io/assets/assets/images/bg-bottom.svg, что удваивает папку assets.

Следовательно, вам нужно изменить путь изображения для фона на images/bg-bottom.svg. В основном у вас есть проблемы с вашим относительным путем. Для файлов CSS всегда папка, в которой находится файл CSS, используется в качестве «отправной точки» для обхода.

Должен решить эту проблему:

body {
    background: url("images/bg-bottom.svg"), url("images/bg-top.svg");
}

, по крайней мере, он это сделал для меня: P.

Answer 2

Сайт проекта доступен по адресу http(s)://<user>.github.io/<repository>

В вашем случае: https://github.com/ruth9403/pricing-toggle-hamburger (не https://github.com/ruth9403/pricing-toggle-hamburger.github.io)

Обязательно отметьте настройки вашего репозитория для активации публикации страницы.
Убедитесь, что источником публикации является master (иначе это будет ветвь gh-pages по умолчанию для страницы проекта ).