Problema al mostrar imagen en un th usando span

D

Diego Martinez

Beta

SEO

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 26 Dic 2012

• #1

Hola, tengo un problema, resulta que tengo una tabla y quiro mostrar en un "th" una imagen en vez de texto de la siguiente forma:

<td>
<span class="pato"></span>
</td>

css
.pato{
background-image: url(pato.png);
}

Hacer clic para expandir...

De esta forma no muestra la imagen solo la muestra si agrego texto entre "span". Si me pueden aportar alguna sugerencia Genial!!

 

Última edición: 26 Dic 2012

I

Isidro

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 26 Dic 2012

• #2

Prueba así:

Insertar CODE, HTML o PHP:

.pato{
    background-image: url('pato.png');
    /*background: url('pato.png') no-repeat;*/
    height: 102px;
    width: 457px;
    position: absolute
}

Edito: Me gustaría saber los motivos para introducir una imagen en las etiquetas "span", cuando van dirigidas especialmente al texto.

 

Última edición: 26 Dic 2012

D

deadmau5

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 6 Ene 2013

• #3

Como bien dijo arriba Isidro.
Se hace poniéndole position absolute, y definiéndole width y height.
Pero te recomendaría que en vez de usar tablas uses divs. Te van a solucionar la vida.

 

Lopezito

Zeta

Diseñador

Verificación en dos pasos activada

Verificado por Whatsapp

• 8 Ene 2013

• #4

deadmau5 dijo:

Como bien dijo arriba Isidro.
Se hace poniéndole position absolute, y definiéndole width y height.
Pero te recomendaría que en vez de usar tablas uses divs. Te van a solucionar la vida.

Hacer clic para expandir...

No es necesario position:absolute; solo con definir background, width y height basta

 

I

Isidro

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 8 Ene 2013

• #5

Lopezito dijo:

No es necesario position:absolute; solo con definir background, width y height basta

Hacer clic para expandir...

En realidad sí. No es div ni img, es la etiqueta span.
Y si width y height son superiores a las dimensiones de la imagen, puede usar no-repeat (como se comenta) para que no los tome en cuenta.

 

Lopezito

Zeta

Diseñador

Verificación en dos pasos activada

Verificado por Whatsapp

• 8 Ene 2013

• #6

Isidro dijo:

En realidad sí. No es div ni img, es la etiqueta span.
Y si width y height son superiores a las dimensiones de la imagen, puede usar no-repeat (como se comenta) para que no los tome en cuenta.

Hacer clic para expandir...

Prueba sin absolute, que es lo mismo :drunk:

 

I

Isidro

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 8 Ene 2013

• #7

Lopezito dijo:

Prueba sin absolute, que es lo mismo :drunk:

Hacer clic para expandir...

No pretendo discutir, pero no es necesario. Haz la prueba tú, yo ya la hice.

Insertar CODE, HTML o PHP:

<td>
    <span class="pato"></span>
</td>


<style>
    .pato{
        background: url(header.JPG);
        height: 102px;
        width: 457px
    }
</style>

 

Jorge Reyes

1

Kappa

Social Media

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Suscripción a IA

• 8 Ene 2013

• #8

No seria mas fácil así?

PHP:

<td>
<img src="pato.png"  height="102px" width="50px">
</td>

 

I

Isidro

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 8 Ene 2013

• #9

Jarm97171997 dijo:

No seria mas fácil así?

PHP:

<td>
<img src="pato.png"  height="102px" width="50px">
</td>

Hacer clic para expandir...

Sí, y aún mejor:

HTML:

<img src="header.JPG"/>

Pero si pedía eso...

 

D

DjLucho

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 9 Ene 2013

• #10

Un detalle,
[CODE
]<td>
<span class="pato"></span>
</td>

css
.pato{
background-image: url(pato.png);
} [/CODE]
Pato.png lo pusiste sin " ' "
debería quedar así

Insertar CODE, HTML o PHP:

<td>
<span class="pato"></span>
</td>

css
.pato{
background-image: url('pato.png');
}

 

I

Isidro

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 9 Ene 2013

• #11

DjLucho dijo:

Un detalle,
[CODE
]<td>
<span class="pato"></span>
</td>

css
.pato{
background-image: url(pato.png);
} [/CODE]
Pato.png lo pusiste sin " ' "
debería quedar así

Insertar CODE, HTML o PHP:

<td>
<span class="pato"></span>
</td>

css
.pato{
background-image: url('pato.png');
}

Hacer clic para expandir...

Las comillas puedes colocarlas o no. En este caso, no es el problema que causa la "invisibilidad", por lo que aun teniendo comillas no se visualizará.

 

C

codigoadicto

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Ene 2013

• #12

Y porqué un span?