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: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 і папка зображень поза папкою css, тоді вам доведеться використовувати "../ images / image.jpg", і вона буде працювати так, як це було для мене, просто переконайтеся, що структура каталогів.

вам справді не потрібні лапки, якщо, скажімо, у використанні використовуються зображення з вашого файлу css, це може бути

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

Вам не потрібно використовувати лапки, і ви можете використовувати будь-який шлях, який вам подобається!

Перегляньте відповідні довідкові сторінки для точок зображення для фонового зображення та URI

1. Це не обов'язково повинно бути в лапках, але ви можете використовувати їх, якщо хочете. (Я думаю, що IE5 / Mac не підтримує єдиних лапок).
2. Можливий і відносний, і абсолютний; відносний шлях відносно шляху файлу css.

просто запишіть у свій файл css, як нижче

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