Проблемы пути фонового изображения CSS
В среди моего CSS у меня есть следующее:
#framecontentTop{
position: absolute;
top: 0;
left: 120px;
right: 0;
height: 100px;
overflow: hidden;
background-image: url(/Users/myname/Website Project/logo.jpg);
color: white;
}
Где путем к изображению, которое я хочу использовать в качестве фонового изображения, является/Users/myname/Website Project/logo.jpg
Однако, когда я вставил свое отделение с идентификатором framecontentTop, это не показывает изображение (или действительно ничто) как фон. Нет никаких других отделений в CSS для конфликта с ним, и когда я установил фон для framecontentTop к цвету или сохраняю его как изображение, но поместил URL как некоторое случайное изображение онлайн, это загружает его прекрасный. Таким образом, я могу только предположить, что проблема с тем, как я определил путь к изображению - кто-либо может видеть то, что я сделал неправильно здесь?
Большое спасибо
2 ответа
Если у вас есть специальные символы, они должны быть экранированы или, в случае пробелов, по крайней мере, заключены в кавычки, например, так:
background-image: url("/Users/myname/Website Project/logo.jpg");
Полные требования вы можете посмотреть в W3C Spec.
Некоторые символы, встречающиеся в URI без кавычек, такие как круглые скобки, запятые, пробелы, одинарные кавычки (') и двойные кавычки ("), должны быть заключены в обратную косую черту, чтобы полученное значение URI было токеном URI: '(', ')', '\,'.
Вы используете абсолютный путь, который всегда будет преобразовываться в один и тот же URL на вашем сервере. Если он работает, когда вы помещаете его в элемент A, но не работает в элементе B, есть вероятность, что проблема не в URL, а в другом параметре background или background-image.
Я бы использовал функцию "Inspect Element" в Firebug, чтобы выяснить, не имеет ли приоритет другая настройка фона.
URL с пробелами всегда должны быть в кавычках, кстати:
background-image: url("/Users/myname/Website Project/logo.jpg");