Redimensionar imagen de fondo de tabla

CroMag · #1 (**permalink**) 14/09/2009, 12:00

Hola, hace poco que empece con CSS, no se si mi pregunta sera basica o no pero la pongo aqui, la pregunta es, tengo una tabla dividida en celdas de diferentes tamaños que uso para maquetar, esta tabla y sus celdas se redimensionan con la web, pero en una de ellas tengo una imagen de fondo que añadi con css (background-image: url(logos/fondo.jpg), el problema es que no se adapta al ancho ni al largo de la celda sino que aparece recortada, ¿se puede hacer que el fondo se adapte a la celda segun su proporcion en cada momento?.Gracias

willyfc · #2 (**permalink**) 14/09/2009, 12:44

Una imágen de fondo no se puede manipular, excepto su posición, no redimensiona, quizá esto te sirva

CroMag · #3 (**permalink**) 14/09/2009, 18:28

Con el ejemplo que citas consegui algun avance, se carga la imagen dentro del div y el texto en otro div por encima, el problema es que no acaba de encuadrarse perfectamente al div, me explico, el div esta en la parte central de la web y tiene que redimensionarse dentro de su espacio, por la parte superior y la parte izquierda se adapta a los margenes del div, pero la parte inferior y derecha se escapa unos centimetros del borde del div, ¿puedo hacer algo para que se ajuste perfectamente al encuadre que el corresponde?.Gracias

P.D:Dejo el codigo

Código HTML:

<div id="tabla3">
<img src="logos/coche.jpg">
<div class="texto">El contenido quedar&aacute; sobre la
capa de la imagen</div>
</div>

Código HTML:

#tabla3 { 
align: center;
width: 100%;
height: 100%;
border: 4px inset;
margin: 4px;
}

#tabla3 img {
width: 100%;
height: 100%;
position: absolute;
}

.texto { color: #f00;
font-size: 30px;
position: relative;
}

willyfc · #4 (**permalink**) 14/09/2009, 19:02

Prueba de esta manera:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{height:99%}
#tabla3 { 
width: 99%;
height: 99%;
border: 4px inset #000;
margin: 0 auto;
position:relative;
}
 
#tabla3 img {
width: 100%;
height: 100%;
position: absolute;
}
 
.texto { color: #f00;
font-size: 30px;
position: relative;
}
</style>
</head>
 
<body>
<div id="tabla3">
    <img src="Imagen de un apretón de manos, un blanco y un negro.jpg">
    <div class="texto">El contenido quedar&aacute; sobre la
    capa de la imagen</div>
</div>
</body>
</html>

Si queres usar el 100% de todo tendras que eliminar los bordes

alex1195 · #5 (**permalink**) 14/09/2009, 19:18

jaja, esa es una duda clasica, yo creía lo mismo cuando comenzé en esto...

Saludos y suerte... mi msn [email protected] <-- para cualquier duda, estoy para ayudar :D

CroMag · #6 (**permalink**) 15/09/2009, 04:28

Lo probare y ya os comento.Gracias

CroMag · #7 (**permalink**) 15/09/2009, 08:06

Ya esta arreglado, muchas gracias por vuestra ayuda, no os despisteis mucho que a lo mejor ya estoy aqui dentro de poco xD.Saludos