background position

[danistrein]

hola foreros quisiera preguntarles tengo una tabla la cual estoy usando css con imágenes para darle fondo. miren tengo esto asta ahora.

Código HTML:

<table width="200" border="0" cellspacing="0">
<tr>
<td class="t_l"></td>
<td class="t_c"></td>
<td class="t_r"></td>
</tr>
<tr>
<td class="m_l"></td>
<td class="m_c"></td>
<td class="m_r"></td>
</tr>
<tr>
<td class="b_l"></td>
<td class="b_c"></td>
<td class="b_r"></td>
</tr>
</table> 

Código:

.t_l{
background:url(imagen/table.png) top left;
width:13px;
height:13px;
}
.t_c{
background:url(imagen/table.png) top center;
width:13px;
height:13px;
}
.t_r{
background:url(imagen/table.png) top right;
width:13px;
height:13px;
}
.m_l{
background:url(imagen/table.png) left repeat-y ;
width:13px;
height:13px;
}
.m_c{
background:url(imagen/table.png) center repeat-y;
width:13px;
height:13px;
}
.m_r{
background:url(imagen/table.png) right repeat-y;
width:13px;
height:13px;
}
.b_l{
background:url(imagen/table.png) bottom left;
width:13px;
height:13px;
}
.b_c{
background:url(imagen/table.png) bottom center;
width:13px;
height:13px;
}
.b_r{
background:url(imagen/table.png) bottom right;
width:13px;
height:13px;
}

asta ahi funciona bien t_l, t_c, t_r, b_l, b_c, b_r. ahora mi consulta es como hacer para que los m_l, m_c, m_r muestren lo que contiene en el medio de la imagen. mientras que no me muestre toda la imagen completa cuando agrande el height de la tabla


PS: la imagen que utiliso tiene de ancho y largo 100px.

[ArturoGallegos]

?¿ que tal si agregas en tu css

Código HTML:

vertical-align:middle; text-align:center;

[hades87]

No me he enterado mucho del asunto. Que es lo que quieres realmente?

[AhmedRugama]

Iniciado por danistrein

asta ahi funciona bien t_l, t_c, t_r, b_l, b_c, b_r. ahora mi consulta es como hacer para que los m_l, m_c, m_r muestren lo que contiene en el medio de la imagen. mientras que no me muestre toda la imagen completa cuando agrande el height de la tabla
PS: la imagen que utiliso tiene de ancho y largo 100px.

Creo que esta algo confuso no? lo que queres es meterle un contenido a las celdas y que no supere los 100px x 100px?

Si es asi solo tenes que cerar un contenedor en la celda

.contenedor100{
max-width:100px;
max-height:100px;
}

[danistrein]

Iniciado por Ag666

?¿ que tal si agregas en tu css

Código HTML:

vertical-align:middle; text-align:center;

no me resulto con eso :S.

Iniciado por hades87

No me he enterado mucho del asunto. Que es lo que quieres realmente?

lo que quiero logras es usar una sola imagen para toda la tabla pero cuando el height del .m_ se agrande no se repita toda la imagen.

Iniciado por AhmedRugama

Creo que esta algo confuso no? lo que queres es meterle un contenido a las celdas y que no supere los 100px x 100px?

Si es asi solo tenes que cerar un contenedor en la celda

.contenedor100{
max-width:100px;
max-height:100px;
}

si la imagen mide 100 x 100. pero solo quiero utilisar lo que esta en el medio. en las td de la tabla. pero que se repitan en 1px y no me repita toda la imagen completa.

[danistrein]

trate de hacerlo tambien con

Código HTML:

background:url(imagen/table.png) ;
background-position: 0 15px;
height:1px;
width: 13px;

pero no funciona :S

[hades87]

y si al tr le cambiar el background y le pones repeat x?

PD: Edita los mensajes en vez de postear 2 veces.

[danistrein]

Iniciado por hades87

y si al tr le cambiar el background y le pones repeat x?

PD: Edita los mensajes en vez de postear 2 veces.

también e intentado poniéndole repeat-x, pero igual me repite toda la imagen completa :S.


PS: si lo siento por hacer dos mensajes juntos. la próxima vez tendré en cuenta tu consejo.

[ArturoGallegos]

Iniciado por danistrein

si la imagen mide 100 x 100. pero solo quiero utilisar lo que esta en el medio. en las td de la tabla. pero que se repitan en 1px y no me repita toda la imagen completa.

y si dejas de complicarte y cortas la imagen para dejar solo el fragmento que requieres aplicar?

[danistrein]

Iniciado por Ag666

y si dejas de complicarte y cortas la imagen para dejar solo el fragmento que requieres aplicar?

jeje si lo tengo echo asi . pero estoy tratando de averiguar como hacerlo con una sola imagen :S

[hades87]

tienes un link a la página? es que no me acabo de enterar demasiado

[AhmedRugama]

Iniciado por danistrein

jeje si lo tengo echo asi . pero estoy tratando de averiguar como hacerlo con una sola imagen :S

Ps no hay forma de hacerlo solo con una imagen, punto.

Lo que podes hacer es generar la imagen dinamicamente con php, pero siempre te va a crear otra imagen.

Si la imagen es de uso temporal te puede servir esto

Como cortar una imagen con PHP

asi la podes eliminar despues de utilizarla Borrar archivo con php

Si la vas a usar permanentemente no entiendoporque la queres sacar de otra imagen, es cierto que ay qe optimizar el tiempo de carga pero esto si es exagerar

[danistrein]

Iniciado por hades87

tienes un link a la página? es que no me acabo de enterar demasiado

si es esta http://www.sitiumweb.com.ar/web/darcksector/ pero ya eh cortado la imagen :S.

Iniciado por AhmedRugama

Ps no hay forma de hacerlo solo con una imagen, punto.

Lo que podes hacer es generar la imagen dinamicamente con php, pero siempre te va a crear otra imagen.

Si la imagen es de uso temporal te puede servir esto

Como cortar una imagen con PHP

asi la podes eliminar despues de utilizarla Borrar archivo con php

Si la vas a usar permanentemente no entiendoporque la queres sacar de otra imagen, es cierto que ay qe optimizar el tiempo de carga pero esto si es exagerar

jeje entonces en definitiva no se puede hacer con una sola imagen , le echare un vistaso a los post que me pasaste