Как сделать так, чтобы фоновые изображения CSS URL отображались в localhost?

Question

Я только что установил xampp и перенес на него один из своих живых сайтов, чтобы начать работать с localhost.

Итак, чтобы просмотреть мой сайт, я перехожу на localhost / example.com

Я заметил некоторые проблемы с изображениями, когда в моем HTML, например, было:

<img src="/new_pictures/05.jpg" alt="Central Market"/>

Изображение не будет отображаться, но затем я удалил /, и это работает:

<img src="new_pictures/05.jpg" alt="Central Market"/>

Кажется, у меня похожая проблема с фоновым изображением CSS, но я не могу заставить его работать - если я удалю / там, изображение не появится на живом сайте. Как заставить фоновое изображение отображаться на локальном хосте?

Пример CSS (работает на живом сайте, но не на localhost):

.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;
}

Спасибо!

Answer 1

Пути к изображениям в вашей таблице стилей должны быть там, где изображение относительно таблицы стилей , например, если ваш файл .css находится в каталоге, подобном этому на вашем сайте:

/css/styles.css

Ваш путь должен выглядеть следующим образом (перейдите в каталог, затем в images)

background-image:url(../images/feather_email2.jpg);

Answer 2

Вы можете попробовать тег base - поддерживается в большинстве популярных браузеров - и затем указать пути относительно атрибута href тега base. Или убедитесь, что вы указали правильные пути относительно таблицы стилей CSS

Answer 3

Попробуйте использовать ./ вместо / и убедитесь, что вы указали правильный путь.