CSS background-image - Quelle est l'utilisation correcte?

Quelle est l'utilisation correcte de la propriété CSS background-image? Les éléments clés que j'essaie de comprendre sont

1. Doit-il être entre guillemets, c'est-à-dire: background-image: url('images/slides/background.jpg');
2. Peut-il s'agir d'un chemin relatif (comme ci-dessus) ou doit-il s'agir d'une URL complète?
3. Tout autre point dont je devrais être conscient pour m'assurer qu'il fonctionne correctement sur les navigateurs conformes aux normes.

Le chemin peut être complet ou relatif (bien sûr, si l'image provient d'un autre domaine, elle doit être pleine).

Vous n'avez pas besoin d'utiliser des guillemets dans l'URI; la syntaxe peut être soit:

background-image: url(image.jpg);

Ou

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

Cependant, à partir de W3 :

Certains caractères apparaissant dans un URI sans guillemets, tels que les parenthèses, les espaces blancs, les guillemets simples (') et les guillemets doubles ("), doivent être échappés avec une barre oblique inverse afin que la valeur URI résultante soit un jeton URI:' \ (', '\)'.

Ainsi, dans de tels cas, il est soit nécessaire d'utiliser des guillemets ou des guillemets doubles, soit d'échapper les caractères.

1. Non, vous n'avez pas besoin de devis.

2. Oui, vous pouvez. Mais notez que les URL relatives sont résolues à partir de l'URL de votre feuille de style.

3. Mieux vaut ne pas utiliser de citations. Je pense qu'il y a des clients qui ne les comprennent pas.

1) Mettre des guillemets est une bonne habitude

2) il peut s'agir d'un chemin relatif par exemple:

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

recherchera le dossier images dans le dossier à partir duquel le css est chargé. Donc, si les images sont dans un autre dossier ou en dehors de l'arborescence des dossiers CSS, vous devez utiliser le chemin absolu ou relatif au chemin racine (commençant par /)

3) vous devez utiliser une déclaration complète pour background-image pour qu'elle se comporte de manière cohérente dans les navigateurs conformes aux normes comme:

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

Les chemins relatifs sont bien et les guillemets ne sont pas nécessaires. Une autre chose qui peut aider est d'utiliser la backgroundpropriété "shorthand" pour spécifier une couleur d'arrière-plan au cas où l'image ne se charge pas ou n'est pas disponible pour une raison quelconque.

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

Notez également que vous pouvez spécifier si l'image se répétera et dans quelle direction (si vous ne le spécifiez pas, la valeur par défaut est de répéter horizontalement et verticalement), ainsi que l'emplacement de l'image par rapport à son conteneur.

Si vos images se trouvent dans un répertoire distinct de votre fichier css et que vous souhaitez que le chemin relatif commence à la racine de votre site Web:

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

il suffit de vérifier la structure de répertoires où se trouve exactement l'image, supposons que vous ayez un dossier css et un dossier images en dehors du dossier css, vous devrez alors utiliser "../ images / image.jpg" et cela fonctionnera comme pour moi, assurez-vous simplement que le structure du répertoire.

vous n'avez vraiment pas besoin de guillemets si, par exemple, utilisez l'image de votre fichier css, cela peut être

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

Vous n'avez pas besoin d'utiliser des guillemets et vous pouvez utiliser n'importe quel chemin que vous aimez!

Jetez un œil aux pages de référence des points de site respectives pour l' image d' arrière-plan et les URI

1. Il n'est pas nécessaire qu'il soit entre guillemets, mais peut les utiliser si vous le souhaitez. (Je pense que IE5 / Mac ne prend pas en charge les guillemets simples).
2. Le relatif et l'absolu sont possibles; un chemin relatif est relatif au chemin du fichier css.

écrivez simplement dans votre fichier css comme ci-dessous

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