¿Cómo agregar código CSS en línea con imagen de fondo en el código HTML de la página?

Question

¿Cómo agregar código CSS en línea con imagen de fondo en el código HTML de la página?

19 mar 2012, 17:35:52

Vistas: 62.5K

Votos: 0

Quiero agregar código CSS en línea dentro de una página de mi blog. Este código CSS llama a una imagen como fondo de un div.

¿Es esto posible? y ¿cómo hacerlo?

He intentado agregar la imagen como un recurso Multimedia y obtuve una URL para ella, pero usar esta URL no parece funcionar.

Ejemplo del código que pegué en el HTML de mi página:

<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;
    ">
    Haga clic aquí &raquo;</a></p>

Timothée HENRY

181

css

Comentarios

Me di cuenta de que el problema era que tenía un espacio en medio de mi código CSS en línea, lo que impedía que el código funcionara.

Timothée HENRY

20 mar 2012 12:14:11

Todas las respuestas a la pregunta

Comentarios

Me di cuenta de que el problema era que tenía un espacio en medio de mi código CSS inline que impedía que el código funcionara.

Timothée HENRY

20 mar 2012 12:14:27

Me alegro de que lo hayas resuelto. Ese tipo de cosas puede volver loco a un diseñador mientras busca una solución ;)

Sagive

20 mar 2012 14:52:33

Estás pidiendo a gritos un enlace de imagen roto en el futuro al usar la ruta directa al archivo. Funcionaría mejor usar wp_get_attachment_image_src().

JPollock

21 jun 2013 00:50:12

No hay ninguna razón por la que esta técnica no debería funcionar en general, aunque tu ejemplo de código específico no funcionará de la manera que dices que deseas: estás agregando el atributo de estilo a una etiqueta A, no a una etiqueta DIV, que es lo que dices que quieres hacer. Por lo tanto, la etiqueta A debe tener el estilo como se muestra, no la etiqueta DIV.

Adam Rice

291

19 mar 2012 18:10:04

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

¿no puedes simplemente darle una clase a ese enlace? ¿por qué tocar tus archivos de plantilla?..
de cualquier forma no veo razón por la que no puedas hacer eso... el css debería funcionar..

El único cambio que haría al editar un archivo de plantilla es
usar php para obtener la url de la carpeta (donde está tu imagen) así:

<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">Haz clic aquí &raquo;</a></p>

De nuevo... te recomiendo que uses tu style.css para cargar ese css y no en
archivos de plantilla.. si lo necesitas solo para una página específica dime... tengo
una mejor solución para eso.

Espero que esto ayude, Sagive.