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

Question

Quelle est l'utilisation correcte de la propriété CSS background-image? Les principales choses que je suis en train de comprendre est

1. -t-il besoin d'être entre guillemets i.e. .: background-image: url('images/slides/background.jpg');
2. Peut-il être un chemin relatif (comme ci-dessus) ou doit-il être 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.

Answer 1

le chemin peut être soit complet ou relatif (bien sûr, si l'image est d'un autre domaine, il doit être complet).

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

background-image: url(image.jpg); 

Ou

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

Cependant, à partir W3:

Certains caractères apparaissant dans un unquoted URI, tels que les parenthèses, des caractères blancs, des guillemets simples (') et les guillemets doubles ("), doivent être échappés avec une barre oblique inverse afin que la valeur de l'URI qui en résulte soit un jeton URI:' \ (',' \) '

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

Answer 2

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

Answer 3

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

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

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

Answer 4

1) mettre des citations est une bonne habitude

2) il peut être un chemin relatif par exemple:

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

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

3) vous devez utiliser une déclaration complète pour l'arrière-plan afin de le rendre cohérent à travers les navigateurs conformes aux normes comme:

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

Answer 5

Jetez un oeil sur les pages de référence sitepoint respectives pour background-image et URIs

1. Il ne doit pas être entre guillemets, mais peut les utiliser si vous le souhaitez. (Je pense que IE5/Mac ne supporte pas les guillemets simples).
2. À la fois relatif et absolu est possible; un chemin relatif est relatif au chemin du fichier css.

Answer 6

Les chemins relatifs sont fines et citations ne sont pas nécessaires. Une autre chose qui peut aider est d'utiliser la propriété "raccourci" background pour spécifier une couleur d'arrière-plan dans le 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ète et dans quelle direction (si vous ne 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 à sa récipient.

Answer 7

Si vos images sont dans un répertoire distinct de votre fichier css et que vous voulez le chemin relatif commence à partir de la racine de votre site web:

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

Answer 8

il suffit de vérifier la structure des répertoires où exactement l'image est supposons que vous avez un dossier de css et un dossier d'images en dehors du dossier de css alors vous devrez employer "../ images/image.jpg" et cela fonctionnera comme il a fait pour moi juste s'assurent la structure de répertoire.

Answer 9

il suffit d'écrire dans votre fichier CSS comme ci-dessous

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

Answer 10

vous ne vraiment pas besoin de guillemets se laisser dire l'utilisation utilisent l'image de votre fichier css, il peut être

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