¿Cómo referenciar una imagen del tema en una hoja de estilos?

Question

¿Cómo referenciar una imagen del tema en una hoja de estilos?

19 may 2015, 08:25:43

Vistas: 46.2K

Votos: 7

Tengo un elemento global como parte de mi tema y necesito referenciar una imagen como imagen de fondo. Necesito la URL de la imagen. Asumo que es una mala práctica codificar la URL directamente y que la URL debe ser relativa a la ubicación del tema. ¿Cuál es la forma recomendada de referenciar una imagen dentro de una hoja de estilos?

Andrew

419

imágenes css urls

Comentarios

¿Dónde está la ubicación de la imagen o debe ser cargada?

m4n0

19 may 2015 08:28:21

Todas las respuestas a la pregunta

Comentarios

No me funciona, tengo la misma estructura

Hidayt Rahman

9 ene 2018 17:40:43

@HidaytRahman ¿Tienes un demo de esto?

m4n0

9 ene 2018 18:00:08

Sí, está funcionando, no funcionaba por un error tonto, gracias :)

Hidayt Rahman

10 ene 2018 17:50:52

¿Cuál podría ser ese error tonto? ;)

m4n0

10 ene 2018 19:21:51

Tenía un espacio en blanco en el nombre de la imagen que estaba insertando :(

Hidayt Rahman

11 ene 2018 15:01:39

Tuve un problema con la relatividad de la URL. Me refiero a que al abrir una vista general de categoría desde categorías hijas de tercer nivel o más profundas como esta:

-naturaleza
--animales
---lobos >>>3er nivel
--aves

La URL para lobos sería algo como: /categoria/naturaleza/animales/lobos/ Por lo tanto, la ubicación de la imagen está un nivel de directorio antes y no se muestra.

Así que probé esto y funcionó:

.sidebar-row .widget {
  background-image: url("../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../../wp-content/uploads/.../image.webp");
}

Las imágenes en ubicaciones incorrectas serán ignoradas, la que esté en la ubicación correcta se mostrará.

Por cierto: Estoy usando el plugin "Simple CSS" para cambiar el diseño de mi sitio.

Frank Belin

11

25 ago 2021 01:31:06

Comentarios

Aunque esa es una solución ingeniosa, tu navegador tendrá que hacer hasta tres solicitudes para la imagen hasta que encuentre la correcta. Preferiría otra forma de resolver esto.

Rup

27 ago 2021 11:11:21

Para WordPress, debería ser algo así:

   background:url('../wp-content/themes/tutema/images/social-icons-v2-opt.png');

Para Tema Hijo

   background:url('../wp-content/themes/tutema-child/images/social-icons-v2-opt.png');

Michael C.

1

17 ago 2020 02:25:31

Comentarios

Los directorios wp-content y themes se pueden renombrar. NO uses estos nombres en tu código.

fuxia

17 ago 2020 04:19:25

¡Gracias por el aviso! Sí, este no es exactamente el código. Por eso mencioné "Es algo así".

Michael C.

18 ago 2020 05:30:22

m4n0 1.36K · Accepted Answer · 2015-05-19T08:42:47Z

Depende de la ubicación de tu imagen y la hoja de estilos.

Pero esta es la sintaxis:

.theme-image {
  background-image: url('../images/header-img.jpg');
}

El código anterior es para la estructura

wp-content
 - themes
  - your-theme 
    - images
     - header-img.jpg
    - css
     - style.css

Estás haciendo que el navegador retroceda un directorio y busque el directorio de imágenes.

m4n0

1.36K

19 may 2015 08:42:47