CSS background-image - Как правильно использовать?

Как правильно использовать свойство CSS background-image? Ключевые вещи, которые я пытаюсь понять, это

1. Должен ли он быть в кавычках, т.е. background-image: url('images/slides/background.jpg');
2. Это может быть относительный путь (как выше) или полный URL?
3. Любые другие моменты, о которых я должен знать, чтобы убедиться, что они работают корректно в браузерах, соответствующих стандартам.

Путь может быть полным или относительным (конечно, если изображение принадлежит другому домену, оно должно быть полным).

Вам не нужно использовать кавычки в URI; синтаксис может быть:

background-image: url(image.jpg);

Или

background-image: url("image.jpg");

Однако из W3 :

Некоторые символы, появляющиеся в URI без кавычек, такие как круглые скобки, символы пробела, одинарные кавычки (') и двойные кавычки ("), должны быть экранированы с помощью обратной косой черты, чтобы полученное значение URI было токеном URI:' \ (', '\)'.

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

1. Нет, вам не нужны кавычки.

2. Да, ты можешь. Но обратите внимание, что относительные URL-адреса разрешаются из URL-адреса вашей таблицы стилей.

3. Лучше не используйте кавычки. Я думаю, что есть клиенты, которые их не понимают.

1) цитаты это хорошая привычка

2) это может быть относительный путь, например:

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

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

3) вы должны использовать полное объявление для background-image, чтобы оно работало согласованно в соответствии со стандартами браузеров, таких как:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Относительные пути хороши и кавычки не нужны. Еще одна вещь, которая может помочь, - это использовать backgroundсвойство «стенография», чтобы указать цвет фона на случай, если изображение не загружается или по какой-то причине недоступно.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Также обратите внимание, что вы можете указать, будет ли изображение повторяться и в каком направлении (если вы не укажете, по умолчанию будет повторяться по горизонтали и вертикали), а также расположение изображения относительно его контейнера.

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

background-image: url('/Images/bgi.png');

просто проверьте структуру каталогов, где именно изображение, предположим, что у вас есть папка css и папка images вне папки css, тогда вам нужно будет использовать "../ images / image.jpg", и она будет работать так же, как и для меня, просто убедитесь, что структура каталога.

вам действительно не нужны кавычки, если, скажем, использовать использовать изображение из вашего файла CSS это может быть

{background-image: url(your image.png/jpg etc);}

Вам не нужно использовать кавычки, и вы можете использовать любой путь, который вам нравится!

Взгляните на соответствующие справочные страницы сайта для background-image и URI

1. Он не должен быть в кавычках, но может использовать их, если хотите. (Я думаю, что IE5 / Mac не поддерживает одинарные кавычки).
2. Возможно как относительное, так и абсолютное; Относительный путь относительно пути файла CSS.

просто напишите в вашем файле CSS, как показано ниже

background:url("images/logo.jpg")