estirar fondo

sabruchi · #1 (**permalink**) 10/06/2010, 07:26

Hola estoy haciendo un proyecto en php y html, y tengo el siguiente problema
necesito que el fondo de una etiqueta div se estire. alguien sabe como hacerlo?
gracias de antemano!

Hidek1 · #2 (**permalink**) 10/06/2010, 07:28

este tema nada tiene que ver con PHP.. pregunta en CSS
y si quieres que se estire después de haber ya cargado.. pregunta en Javascript

saludos!

abimaelrc · #3 (**permalink**) 10/06/2010, 07:32

Hasta donde tengo entendido, los fondos no se estiran (tal vez alguien me sorprenda). Lo que puedes hacer es crear una imagen que pueda cumplir con algún patrón y repetirla, sea en altura o en anchura.

sabruchi · #4 (**permalink**) 10/06/2010, 08:33

les explico lo que quiero hacer... miren esta pagina http://sabriwebs.0fees.net/
quiero hacer ese cuadrado con puntas redondeadas. que encuadra el hola mundo
para q cuando un usuario postee el texto aparesca en un cuatrado con puntas redondeadas como ese. nose si me explico....
entonces habia pensado hacer el bloque con una etiqueta div con la imagen de fondo que sea ese cuadrado de puntas redondeadas que se estire segun la dimension del post.
o hay alguna forma mas facil de hacer esto?

GatorV · #5 (**permalink**) 10/06/2010, 08:48

Tema movido desde PHP a HTML

emprear · #6 (**permalink**) 10/06/2010, 16:15

sabruchi:

El html + Css sería algo asi

Código HTML:

<!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>Marco redondeado</title>
<style type="text/css">
<!--
#izquierda {
	position:relative;
	width:10px;
	height:115px;
	z-index:1;
	background-color: #FFFFFF;
	float: left;
	background-image: url(izq.png);
}
#centro {
	position:relative;
	width:200px;
	height:auto;
	z-index:2;
	background-color: #FFFFFF;
	float: left;
	background-image: url(centro.png);
	text-align: center;
	vertical-align: middle;
}
#derecha {
	position:relative;
	width:10px;
	height:115px;
	z-index:3;
	background-color: #FFFFFF;
	float: left;
	background-image: url(der.png);
}
-->
</style>
</head>

<body>
<div id="contenedor_marco">
  <div id="izquierda"></div>
  <div id="centro">Contenido</div>
  <div id="derecha"></div>
</div>
</body>
</html>

ahora, las imágenes de fondo:
Para la capa izquierda

Para la del centro:

Y para la derecha

Te aclaro que por defecto el valor de repetir para background-image es repeat, que es lo importante para hacer lo que tu denominas, "estiramiento" para el contenido(capa centro), para los cierres a izquierda y derecha, el ancho de la capa es igual al de las imágenes (10px en este caso) y da lo mismo que repita o no.
Cuidado, esto te sirve para hacer el ajuste horizontalmente, si tu contenido va a modificar tambien el alto de la capa central, la cosa es más complicada, y ni me puse a pensar en una solución para eso, espero con esto te alcance.
Saludos

abimaelrc · #7 (**permalink**) 10/06/2010, 16:35

Ahora es un poco más claro lo que quieres hacer, te recomiendo, aparte de lo que ya te sugirieron, que leas este aporte que se puede hacer con CSS, con imagenes y sin ellas http://www.araudi.net/ Busca así mismo, esquinas redondeadas.