Come aggiungere codice CSS inline con immagine di sfondo nel codice HTML della pagina?

Question

Come aggiungere codice CSS inline con immagine di sfondo nel codice HTML della pagina?

19 mar 2012, 17:35:52

Visualizzazioni: 62.5K

Voti: 0

Voglio aggiungere del codice CSS inline all'interno di una pagina del mio blog. Questo codice CSS richiama un'immagine come sfondo di un div.

È possibile? E come si fa?

Ho provato ad aggiungere l'immagine come risorsa Media, e ho ottenuto un URL, ma utilizzando questo URL non sembra funzionare.

Esempio di codice che ho incollato nella pagina HTML:

    <p><a href="http://mysite.com/wp-signup.php" style="width: 90%;
        font-family: Helvetica, Arial, sans-serif;
        background: #0e710d url(http://mysite.com/wp-content/uploads/2012/03/image.png) 0 0 repeat-x;
        font-size: 1.6em;
    ">
    Clicca qui &raquo;</a></p>

Timothée HENRY

181

css

Commenti

Mi sono reso conto che il problema era dovuto al fatto che avevo degli spazi nel mezzo del mio codice CSS inline, il che impediva al codice di funzionare correttamente.

Timothée HENRY

20 mar 2012 12:14:11

Tutte le risposte alla domanda

Commenti

Mi sono reso conto che il problema era dovuto a degli spazi nel mezzo del mio codice CSS inline che impedivano al codice di funzionare.

Timothée HENRY

20 mar 2012 12:14:27

sono contento che tu l'abbia risolto. quel genere di cose può far impazzire un designer mentre cerca una soluzione ;)

Sagive

20 mar 2012 14:52:33

Stai chiedendo un link immagine rotto in futuro utilizzando il percorso del file. Sarebbe meglio usare wp_get_attachment_image_src().

JPollock

21 giu 2013 00:50:12

Non c'è motivo per cui questa tecnica non dovrebbe funzionare in generale, anche se il tuo esempio di codice specifico non funzionerà nel modo in cui dici di voler fare: stai aggiungendo l'attributo style a un tag A, non a un tag DIV, che è quello che dici di voler fare. Quindi il tag A dovrebbe essere stilizzato come mostrato, non il tag DIV.

Adam Rice

291

19 mar 2012 18:10:04

Sagive 2.78K · Accepted Answer · 2012-03-19T18:00:16Z

non puoi semplicemente assegnare una classe a quel link? perché modificare i file template?..
comunque non vedo motivi per cui non dovresti farlo... il css dovrebbe funzionare..

L'unica modifica che farei quando si modifica un file template è
usare php per ottenere l'URL della cartella (dove si trova l'immagine) in questo modo:

<style type="text/css">
.specialLink a {
    width: 90%;
    font-family: Helvetica, Arial, sans-serif;
    background: #0e710d url("<?php get_bloginfo('url'); ?>/wp-content/uploads/2012/03/image.png") repeat-x 0 0;
    font-size: 1.6em;
}
</style>

<p class="specialLink"><a href="http://mysite.com/wp-signup.php">Clicca qui &raquo;</a></p>

Ripeto... ti consiglio di usare il tuo style.css per caricare quel css e non nei
file template.. se ti serve solo per una pagina specifica dimmelo... ho
una soluzione migliore per quello.

Spero sia utile, Sagive.