Imagen de fondo de CSS: ¿Cuál es el uso correcto?

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

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

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

No necesita usar comillas en el URI; la syntax 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 (“), se deben escapar con una barra diagonal inversa para que el valor URI resultante sea un token URI:’ \ (‘, ‘\)’.

Por lo tanto, en casos como estos, es necesario utilizar comillas o comillas dobles, o escapar de los caracteres.

  1. No, no necesitas presupuestos.

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

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

1) poner citas 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 que 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 una statement completa para la imagen de fondo para que se comporte de manera consistente en navegadores compatibles con 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 propiedad de background “taquigrafía” para especificar un color de fondo en caso de que la imagen no se cargue o no esté disponible por algún motivo.

 #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 relativa a 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'); 

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

realmente no necesita citas si, por ejemplo, use están usando la imagen de su archivo CSS, puede ser

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

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

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

  1. No tiene que ser 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 escriba en su archivo CSS como abajo

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