CSS background-image - ¿Cuál es el uso correcto?

¿Cuál es el uso correcto de la propiedad CSS-imagen de fondo? Las cosas clave que estoy tratando de entender es

1. ¿Tiene que estar entre comillas, es decir: background-image: url('images/slides/background.jpg');
2. ¿Puede ser una ruta relativa (como arriba) o debe ser una URL completa?
3. Cualquier otro punto que deba tener en cuenta para asegurarme de que funcione correctamente en todos los navegadores que cumplan con los estándares.

La ruta puede ser completa o relativa (por supuesto, si la imagen es de otro dominio, debe estar llena).

No necesita usar comillas en el URI; la sintaxis puede ser:

background-image: url(image.jpg);

O

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

Sin embargo, desde W3 :

Algunos caracteres que aparecen en un URI sin comillas, como paréntesis, espacios en blanco, comillas simples (') y comillas dobles ("), deben escaparse con una barra invertida para que el valor de URI resultante sea un token de URI:' \ (', '\)'.

Entonces, en casos como estos, es necesario usar comillas o comillas dobles, o escapar de los caracteres.

1. No, no necesitas citas.

2. Sí tu puedes. Pero tenga en cuenta que las URL relativas se resuelven a partir de la URL de su hoja de estilo.

3. Mejor no uses comillas. Creo que hay clientes que no los entienden.

1) poner comillas es un buen hábito

2) puede ser una ruta relativa, por ejemplo:

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

buscará la carpeta de imágenes en la carpeta desde la cual se carga css. Entonces, si las imágenes están en otra carpeta o fuera del árbol de carpetas CSS, debe usar la ruta absoluta o relativa a la ruta raíz (comenzando con /)

3) debe usar la declaración completa para la imagen de fondo para que se comporte de manera consistente en navegadores que cumplan con los estándares como:

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

Las rutas relativas están bien y las comillas no son necesarias. Otra cosa que puede ayudar es usar la backgroundpropiedad "abreviada" para especificar un color de fondo en caso de que la imagen no se cargue o no esté disponible por alguna razón.

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

Observe también que puede especificar si la imagen se repetirá y en qué dirección (si no especifica, el valor predeterminado es repetir horizontal y verticalmente), y también la ubicación de la imagen en relación con su contenedor.

Si sus imágenes están en un directorio separado de su archivo css y desea que la ruta relativa comience desde la raíz de su sitio web:

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

solo verifique la estructura del directorio donde se encuentra exactamente la imagen, suponga que tiene una carpeta css y una carpeta de imágenes fuera de la carpeta css, luego tendrá que usar "../ images / image.jpg" y funcionará como lo hizo para mí solo asegúrese de que estructura de directorio.

realmente no necesita comillas si digamos que use está usando la imagen de su archivo css, puede ser

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

¡No necesita usar comillas y puede usar cualquier ruta que desee!

Eche un vistazo a las respectivas páginas de referencia de puntos de sitio para imágenes de fondo y URI

1. No tiene que estar entre comillas, pero puede usarlas si lo desea. (Creo que IE5 / Mac no admite comillas simples).
2. Tanto relativo como absoluto es posible; una ruta relativa es relativa a la ruta del archivo css.

solo escribe en tu archivo css como abajo

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