Come fare riferimento a un'immagine del tema in un foglio di stile?

Question

Come fare riferimento a un'immagine del tema in un foglio di stile?

19 mag 2015, 08:25:43

Visualizzazioni: 46.2K

Voti: 7

Ho un elemento globale come parte del mio tema e ho bisogno di fare riferimento a un'immagine come sfondo. Mi serve l'URL dell'immagine. Presumo che sia una cattiva pratica inserire l'URL hardcoded e che l'URL debba essere relativo alla posizione del tema. Qual è il modo consigliato per fare riferimento a un'immagine all'interno di un foglio di stile?

Andrew

419

immagini css urls

Commenti

Dove si trova la posizione dell'immagine o deve essere caricata?

m4n0

19 mag 2015 08:28:21

Tutte le risposte alla domanda

Commenti

Non funziona per me, ho la stessa struttura

Hidayt Rahman

9 gen 2018 17:40:43

@HidaytRahman Hai una demo di questo?

m4n0

9 gen 2018 18:00:08

Sì, funziona, non andava a causa di un piccolo errore, grazie :)

Hidayt Rahman

10 gen 2018 17:50:52

Quale potrebbe essere quell'errore sciocco? ;)

m4n0

10 gen 2018 19:21:51

Avevo uno spazio bianco nel nome dell'immagine che stavo inserendo :(

Hidayt Rahman

11 gen 2018 15:01:39

Ho avuto un problema con la relatività dell'URL. Mi riferisco a quando si apre una panoramica di categoria da categorie figlie di terzo livello o più profonde come questa:

-natura
--animali
---lupi >>>terzo livello
--uccelli

L'URL per i lupi diventerebbe simile a: /categoria/natura/animali/lupi/ Di conseguenza, la posizione dell'immagine risulta essere un livello di directory prima e non viene visualizzata.

Quindi ho provato questa soluzione e ha funzionato:

.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");
}

Le immagini nelle posizioni errate verranno ignorate, mentre quella nella posizione corretta verrà visualizzata.

BTW: Sto usando il plugin "Simple CSS" per modificare il layout del mio sito.

Frank Belin

11

25 ago 2021 01:31:06

Commenti

Anche se questa è una soluzione elegante, il tuo browser dovrà effettuare fino a tre richieste per l'immagine prima di trovare quella corretta. Preferirei un altro modo per risolvere questo problema.

Rup

27 ago 2021 11:11:21

Per WordPress, dovrebbe essere qualcosa del genere:

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

Per Child Theme

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

Michael C.

1

17 ago 2020 02:25:31

Commenti

Le directory wp-content e themes possono essere rinominate. NON utilizzare questi nomi nel tuo codice.

fuxia

17 ago 2020 04:19:25

Grazie per l'avviso! Sì, questo non è esattamente il codice. Ecco perché ho specificato "È qualcosa di simile".

Michael C.

18 ago 2020 05:30:22

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

Dipende dalla posizione della tua immagine e del foglio di stile.

Ma questa è la sintassi:

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

Il codice sopra è per la struttura

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

Stai facendo in modo che il browser risalga di una directory e cerchi la cartella delle immagini.

m4n0

1.36K

19 mag 2015 08:42:47