Foros del Web » Creando para Internet » CSS »

background position

Estas en el tema de background position en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/01/2010, 11:54
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Sonrisa background position

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.
__________________
Appones.net - www.appones.net
  #2 (permalink)  
Antiguo 01/01/2010, 12:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: background position

?¿ que tal si agregas en tu css

Código HTML:
vertical-align:middle; text-align:center;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 01/01/2010, 12:58
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: background position

No me he enterado mucho del asunto. Que es lo que quieres realmente?
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 01/01/2010, 13:37
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: background position

Cita:
Iniciado por danistrein Ver Mensaje
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;
}
  #5 (permalink)  
Antiguo 01/01/2010, 17:37
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Sonrisa Respuesta: background position

Cita:
Iniciado por Ag666 Ver Mensaje
?¿ que tal si agregas en tu css

Código HTML:
vertical-align:middle; text-align:center;
no me resulto con eso :S.



Cita:
Iniciado por hades87 Ver Mensaje
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.



Cita:
Iniciado por AhmedRugama Ver Mensaje
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.
__________________
Appones.net - www.appones.net
  #6 (permalink)  
Antiguo 01/01/2010, 17:54
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: background position

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
__________________
Appones.net - www.appones.net

Última edición por danistrein; 01/01/2010 a las 18:01
  #7 (permalink)  
Antiguo 02/01/2010, 02:33
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: background position

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

PD: Edita los mensajes en vez de postear 2 veces.
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 02/01/2010, 12:49
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: background position

Cita:
Iniciado por hades87 Ver Mensaje
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.
__________________
Appones.net - www.appones.net
  #9 (permalink)  
Antiguo 02/01/2010, 13:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: background position

Cita:
Iniciado por danistrein Ver Mensaje
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?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 02/01/2010, 13:19
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: background position

Cita:
Iniciado por Ag666 Ver Mensaje
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
__________________
Appones.net - www.appones.net
  #11 (permalink)  
Antiguo 03/01/2010, 08:53
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: background position

tienes un link a la página? es que no me acabo de enterar demasiado
__________________
No diseñes usando tablas.
  #12 (permalink)  
Antiguo 03/01/2010, 09:35
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: background position

Cita:
Iniciado por danistrein Ver Mensaje
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
  #13 (permalink)  
Antiguo 03/01/2010, 11:58
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: background position

Cita:
Iniciado por hades87 Ver Mensaje
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.


Cita:
Iniciado por AhmedRugama Ver Mensaje
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
__________________
Appones.net - www.appones.net

Última edición por danistrein; 03/01/2010 a las 14:09

Etiquetas: position, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:44.