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

Question

¿Cuál es el uso correcto de la propiedad CSS de la imagen de fondo? Las cosas claves 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 antes) 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.

Answer 1

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

No necesita utilizar comillas en el URI; la sintaxis o bien puede ser:

background-image: url(image.jpg); 

O

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

Sin embargo, desde W3:

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

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

Answer 2

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

Answer 3

1. No, no necesita cotizaciones.

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

3. Es mejor no utilizar comillas. Creo que hay clientes que no los entienden.

Answer 4

1) poner entre comillas es un buen hábito

2) que puede ser ruta relativa, por ejemplo:

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

buscará 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 la declaración completa de la imagen de fondo para que se comporte de forma coherente a través de los navegadores compatibles con estándares como:

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

Answer 5

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

1. No tiene que estar entre comillas, pero se puede utilizar 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.

Answer 6

Las rutas relativas son correctas y no se necesitan presupuestos. 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 algún motivo.

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

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

Answer 7

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

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

Answer 8

simplemente marque la estructura de directorios donde se supone exactamente la imagen que 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 la estructura del directorio.

Answer 9

acaba de escribir en su archivo css como abajo

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

Answer 10

que realmente no necesita comillas si Digamos que su uso está utilizando la imagen de su archivo CSS puede ser

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