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

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

  1. ¿Necesita estar 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 debería tener en cuenta para asegurarme de que funciona correctamente en los navegadores que cumplen con los estándares.
 118
css
Author: kiamlaluno, 2009-05-12
Source

10 answers

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

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

background-image: url(image.jpg);

O

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

Sin embargo, de 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 del URI resultante sea un token de URI:' \(', '\)'.

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

 136
Author: Alex Rozanski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-30 02:42:01

  1. No, no necesitas citas.

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

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

 47
Author: Gumbo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-12 09:18:49

1) poner citas es un buen hábito

2) puede ser ruta relativa por ejemplo: 

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

Buscará la carpeta images en la carpeta desde la que se carga css. Por lo tanto, si las imágenes están en otra carpeta o fuera del árbol de carpetas CSS, debe usar 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 compatibles con estándares como: 

background:blue url('/images/clouds.jpg') no-repeat scroll left center;
 23
Author: TheVillageIdiot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-12 08:39:37

Las rutas relativas están bien y las comillas no son necesarias. Otra cosa que puede ayudar es usar la propiedad" taquigrafía " background 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.

 5
Author: Bryan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-12 08:37:29

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');
 4
Author: AminSaghi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-13 07:15:36

Simplemente verifique la estructura de directorios donde exactamente está la imagen supongamos que tiene una carpeta css y una carpeta de imágenes fuera de la carpeta css, entonces tendrá que usar"../images/imagen.jpg" y funcionará como lo hizo para mí solo asegúrese de que la estructura del directorio.

 1
Author: sunny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-27 08:58:25

Realmente no necesita comillas si digamos que el uso está utilizando la imagen de su archivo css puede ser 

{background-image: url(your image.png/jpg etc);}
 1
Author: Athini Watu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-27 09:13:58

No es necesario utilizar comillas y puede utilizar cualquier ruta que desee!

 0
Author: Rigobert Song,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-12 08:29:31

Eche un vistazo a las respectivas páginas de referencia de sitepoint para background-image y URIs

  1. No tiene que estar entre comillas, pero puede usarlas si lo desea. (Creo que IE5 / Mac no admite comillas simples).
  2. Es posible tanto relativo como absoluto; una ruta relativa es relativa a la ruta del archivo css.
 0
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-12 08:36:36

Simplemente escriba en su archivo css como a continuación

background:url("images/logo.jpg")
 0
Author: BERGUIGA Mohamed Amine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-26 08:42:12