Imagen en fondo de tabla

gledof · #1 (**permalink**) 18/06/2010, 12:33

Hola a todos, tengo una tabla a la que le asigne una medida de 1024x605 px. y le puse un fondo1.jpg de exactamente esa medida:

Cita:

background="index_files/fondo1.jpg" border="0" cellpadding="0"
cellspacing="0" height="605" width="1024">
<table background-repeat="no-repeat" background-attachtmen="fixed"
background-position="50% 50%"

Ademas le agregue este codigo para que se ajuste a diferentes resoluciones:

Cita:

A pesar de esto el fondo1.jpg se repite en la parte inferior de la tabla, y depende de con que navegador abra la pagina no se ajusta con firefox y opera se ve mas chica que la pantalla (no me molesta) pero con ie y opera pasan los limites de la pantalla.
Podrian aconsejarme para solucionar esto, desde ya muchas gracias.

emprear · #2 (**permalink**) 18/06/2010, 16:27

gledof:
En primer lugar, esa mezcla de html Y css que expones es comppletamente incorrecta.
En segundo con javascript podrias detectar la resolución y en base a esta usar diferentes imágenes, de diferentes tamaños. ya que para Css2 el tamaño de una imágen de fondo no puede ser redimensionado, a lo sumo hacer que repita o no repita. Hay una solución alternativa, no completamente funcional todavia ya que no todos los navegadores la soportan y esta basada en Css3

Te dejo una demo en
http://foros.emprear.com/css/table-b...und-image.html

Saludos

gledof · #3 (**permalink**) 18/06/2010, 21:49

Antes te digo que soy pricipiante, voy encontrando y probando varias cosas para salvar los obstaculos con los que me encuentro. Segun lo que me cuentas deberia quitar las lineas de java y modificar con:

Cita:

background-image: url(fondo-800x600.png);
background-position: 0px 0px;
background-repeat: no-repeat;
height: 400px;
width: 400px;
margin-bottom: 10px;
background-size:400px 400px;
-moz-background-size:400px 400px;
-webkit-background-size: 400px 400px;
-khtml-background-size:400px 400px;

mi codigo html, es asi?
Yo estoy trabajando en 1024x678 mi problema surge cuando se abre la pagina en un monitor de mayor resolucion o un monitor wide, ya creo que 800x600 debe quedar poco y nada.
Muchas gracias por tu respuesta.

emprear · #4 (**permalink**) 18/06/2010, 22:14

gledof:
Si es cierto, el tema de las resoluciones es toda una cuestión, puedes usar el Css que te pasé, pero recuerda, Inrternet Explorer (el mas del 70% de los clientes lo usa... no soporta aún las propiedades de Css3), hoy, podemos asumir que el estandar es 1024 x 768, asi que si encaras tu trabajo con ese criterio no estaría mal desde lo técnico, pero en definitiva, todo pasa a veces por una cuestion de gusto y sobre todo, "practicidad", estoy harto de recorrer páginas que están muy prolijas pero necesitas una lupa para poder ver el texo, y ni te digo de los colores, todo es muy light, pálido, abundan las transparencias y termino apretando el botoncito para desactivar los estilos para poder leer el contenido.
Finalmente, en tu respuesta pones

Cita:

mi codigo html, es asi?

a que te refieres?

Bueno, cuando tengas algo subido a la web, pasame el dato a si lo veo y te lo critico mucho ...

un saludo

gledof · #5 (**permalink**) 19/06/2010, 07:13

Te aseguro que no podria definirme a mi mismo como alguien que haga algo en tonos pastel o lights, y con mis escasos conocimientos no tendria la habilidad para llevar a cabo algo sofisticado. Mi concepto de una web hoy se basa en que lo que se muestre encaje en la pantalla, nada mas. Ni siquiera me molesta que el contenido quede mas chico que justo pero si que exeda los laterales y el visitante se vea obligado a usar el skroll lateral y sea incomoda de ver.
Respecto a lo de

Cita:

mi codigo html, es asi?

era una forma de preguntar o confirmar si debia borrar las lineas java y usar los comandos html del link que pegaste en mi linea que define la tabla:

Cita:

Que deberia modificar en esta linea para que no se repita la imagen de fondo, el "no-repeat" no esta funcionando

emprear · #6 (**permalink**) 19/06/2010, 13:54

gledof:

1.
Dentro de tus etiquetas head, pega el siguiente bloque

Código:

<style type="text/css">

    table#fondo{
    background-image: url(fondo-800x600.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    height: 600px;
    width: 800px;
    }

</style>

modifica eso si, los valores height y width con los tuyos y cambia el nombre de la imagen (que obviamente derá ser de la misma medida por la tuya.

Ahora en la etiqueta debes poner sólo lo que sigue<table>

Código HTML:

<table border="0" cellpadding="0" cellspacing="0" id="fondo">

Ahora te hago una teoria básica pero te aconsejo que ya te vayas consigueindo un manual básico de html y css.

todo esto que sigue esta mal:

Código HTML:

<table border="0" cellpadding="0" cellspacing="0" width="1024" height="605" background="index_files/fondo1.jpg" background-repeat="no-repeat" background-position="50% 50%">

Las etiquetas tienen atributos específicos, por ejemplo border="0", inidica que una tabla no tiene bordes. Para el tema del fondo(y otros modificaciones al estilo) hay un atributo llamado style. por ejemplo:
style="background-image: url(fondo-800x600.png); background-repeat: no-repeat;". Es decir, dentro de style se ponen los diferentes propiedades (una propiedad NO es un atributo. Las propiedades se separan con ; y la sintáxis es nombre-propiedad: valor; fijate en los dos puntos.

background-repeat="no-repeat" NO significa nada,

El primer bloque que te indique (<style></style>), puede agrupar todos los estilos de tu página, y en tu caso en particular, asociamos los estilos que definimos con tu tabla a través del atributo id="fondo", esta? lo que esté dentro de table#fondo se aplica a la tabla de id="fondo"

Revisa la demo que te deje y relee el código fuente varias veces.

Saludos

gledof · #7 (**permalink**) 30/06/2010, 06:47

Perdon, pero estuve ausente un tiempo. Recien hoy pude ver tu respuesta y revisare el codigo de la pagina. Muchas gracias por las aclaraciones sobre html y por tu tiempo para responderme.