Colocar imagen en puntas

Ozone · #1 (**permalink**) 24/11/2009, 13:28

Hola a todos!,
tengo un pequeño problema y creo que con algún truco CSS podría solucionarlo.
Les muestro en imagen lo que quiero hacer:

En las esquinas marcadas en rojo quiero poner una imagen bastante grande por oo que no me sirve editar la imagen de fondo, necesitaría una imagen flotante, pero que me muestre la imagen igual en todos los navegadores y resoluciones o al menos en IE y Firefox...

Les agradecería algo de ayuda :)

CCB · #2 (**permalink**) 24/11/2009, 20:52

No se si te entendi.... a ver dices que quieres poner una imagen entre las esquinas en rojo. Podria crear un div darle un id especial para esa capa.
Esto codigo si quieres que sea estatica:

Código HTML:

.capa_con_imagen {width:900px; height:200px;  margin:5px auto 5px auto; }

Esto es si quieres que flote:

Código HTML:

.capa_con_imagen {width: 900px; height:200px; position:fixed; 
	float:inherit; top:50%; }

Solo tienes que modificar el top, bottom, left, right y ponerle el valor que quieras.

Y esto en el <html><body>

Código HTML:

<div id="capa_con_imagen">
		TU imagen aqui
	</div>

Ozone · #3 (**permalink**) 27/11/2009, 10:53

Gracias amig@! El tema es que el div va dentro de una tabla, entonces se me repite el fondo de esa tabla hasta que entre la imagen, te muestro:

La posición está bien pero no quiero que se repita. Sería como una imagen flotante del body pero que no varíe tanto como con el absolute que me vuelve loco con los navegadores y resoluciones...

jomaruro · #4 (**permalink**) 27/11/2009, 14:41

Hola:

Sería conveniente que pusieras la URL o tu código para poder ayudarte mejor.

Saludos.

SPAWN3000 · #5 (**permalink**) 27/11/2009, 20:10

1. Utiliza una sóla imagen. Si cambian las puntas utiliza sprites.
2. define el tamaño de las puntas en CSS.

Crea un DIV contenedor el cual muetra una parte de la imagen con la punta superior izquierda.
EJ.

<div class="contenedor">
</div>

Dentro de este div crea tres mas, todos con background una porcion de la imagen.
Luego con las propiedades top y left defines la posicion de la porcion de cada imagen(naturalmente algunos iran negativos).

<div class="contenedor">
<div class="arriba_derecha">
<div class="abajo_izquierda">
<div class="abajo_derecha">
</div>

Mas menos asi, no tengo un ejemplo a la mano para dar mayor claridad vere si el día de mañana con algo de tiempo(Pero puedes ir intentandolo). Recuerda que el contenedor ya tiene una de las esquinas o podría tener dos.

Un saludo,

Ozone · #6 (**permalink**) 28/11/2009, 06:01

Hola!,
ya lo he solucionado :)
Les dejo el código que usé por si a alguien más le sirve:

Cita:

Cita:

DIV#ejemplo {
position: absolute;
top: -3px;
left: -3px;
}
DIV#ejemplo2 {
position: absolute;
top: -3px;
left: 630px;}

Gracias!