Fondo de capa autoajustable

[ShamanHero]

Hola amigos de ForosdelWeb, debo antes de exponer mi problema aclarar que recien comienzo en esto del css.

Estoy creando un template para una web y necesito de una capa que tenga un fondo autoajustable, es decir que a medida que la capa se agrande, ésta mantenga su fondo y no quede la imagen con el resto vacio una vez esta capa se alarge.

Mi web en donde quiero editar esto, posee otra capa la cual muestra texto que es editable y que a medida que los caracteres vallan ocupando reglones ésta capa se agranda hacia abajo y a la vez la capa que posee estas capas de texto tambien se agranda en la misma direccion. Deceo a esta capa mas grande colocarle una imagen de fondo (por ejemplo una imagen de un pergamino), y que ésta imagen, a medida que se alarge la capa, valla aumentando en tamaño o estirandose, solo hacia abajo (que es la direccion en donde el tamaño aumenta cada vez que se agregan reglones de texto).

El codigo que actualmente tengo es el sgte:

.tmp_right_side { background:url(template/<?=$core['config']['template'] ?>/images/fondo.png) no-repeat left top;
border:1px #5C756E solid; padding:3px;}

Espero me puedan ayudar, ya que he estado bastante tiempo ingeniandomelas por mi cuenta y no he logrado buenos resultados.

Muy agracedico de antemos,

ShamanHero.-

[vgonga1986]

No sé si la imagen se puede redimensionar, pero si te sirve de algo tienes una opción en las imágenes, que es repeat:
http://www.w3schools.com/cssref/pr_b...und-repeat.asp

Lo que se suele hacer en estos casos es usar una imagen del ancho necesario y un alto pequeño, de unos cuantos pixeles (lo que necesites para constuirla después) y que se repita verticalmente con repeat-y. Por ejemplo, el caso del papiro que comentas, puedes trocear la imagen a un único renglón del papiro y luego repetirla verticalmente. Para un acabado mejor, puedes añadir arriba y abajo la parte alta y baja del papiro. Yo lo veo mucho más elegante que estirar la imagen, porque imagina que el texto se alarga mucho, la imagen quedaría pixelada y con un acabado feo.

Espero que te ayude, un saludo.

[ShamanHero]

Muchisimas gracias por la pronta ayuda vgonga1986.

He pensado esa solucion, pero mi problema es que en la parte superior e inferior quiero que se mantenga siempre una imagen y que solo la seccion del medio se repita "n" veces.

Por ejemplo esta imagen:


Lo que busco es que la zona en donde el pergamino se enrrolla quede siempre intacta, una en la parte superior y otra en la inferior, para mantener el efecto de pergamino. Con el repeat lograria que se repitiera, como tu me dices, solo una imagen las cantidad de veces necesarias para rellenar la capa.

[vgonga1986]

Perdona que tardar en contestar, estaba en otro foro.

Tienes que trocear la imagen en 3, una con la parte de arriba del pergamino, otra con un trozo intermedio que se repita verticalmente y una última con el final del pergamino.

A ver si lo montas, si no, pon algo de código y te echo una mano.

Un saludo.

[ShamanHero]

Iniciado por vgonga1986

Perdona que tardar en contestar, estaba en otro foro.

Tienes que trocear la imagen en 3, una con la parte de arriba del pergamino, otra con un trozo intermedio que se repita verticalmente y una última con el final del pergamino.

A ver si lo montas, si no, pon algo de código y te echo una mano.

Un saludo.

Bueno, esto es lo que tengo:

.tmp_right_side { margin-top:1px;background:url(template/<?=$core['config']['template'] ?>/images/rellenofondo.png) repeat left top; border:1px #5C756E solid; padding:3px;margin-bottom:100px;}

Lo que necesito saber es como hacer para decir (en codigo oviamente) que la imagen1 quede fija en la parte superior de la capa, que la imagen2 se repita verticalmente "x" pixeles despues de la parte superior de la capa (para que no quede la imagen1 sobre la imagen2 y que termine de repetirse "x" pixeles antes de la parte inferior de la capa, para que la imagen2 no quede sobre la imagen3) y la imagen3 fija en la parte inferior de la capa.

Ojala puedas ayudarme con ese trocito de codigo. Si necesitas otra parte me avisas :)

Gracias.

[vgonga1986]

Iniciado por ShamanHero

Lo que necesito saber es como hacer para decir (en codigo oviamente) que la imagen1 quede fija en la parte superior de la capa, que la imagen2 se repita verticalmente "x" pixeles despues de la parte superior de la capa (para que no quede la imagen1 sobre la imagen2 y que termine de repetirse "x" pixeles antes de la parte inferior de la capa, para que la imagen2 no quede sobre la imagen3) y la imagen3 fija en la parte inferior de la capa.

Buenas, perdona la tardanza, pero se metió el fin de semana de por medio.

No puedes decirlo eso en código, no en la misma capa. Tienes que crear una capa antes con la imagen1, una capa intermedia con el texto con la imagen2 en repeat y una capa después con la imagen3.

No sé si será tarde, seguramente ya lo vistes por ahí, pero si te sirve mejor, un saludo.

[yoniti7784]

Creo que hize algo de lo que tu pides:
la imagen que muestras la dividi en 3 partes. Lo hice en paint haci que no me quedo exacta la posicion pero poes el intento le hice.

Esto es lo que me quedo::
http://imageshack.us/photo/my-images/135/ayuda2s.png/

Código HTML:

<html>
    <head><title>tituLITO</title>
        <style type="text/css">
        body{
            background-color:green;
            margin-left:0px;
            margin-right:0px;
            margin-top:0px;
            font-size:16px;
            text-align:center;
        }
 
        #arriba,#abajo{
            background-repeat:no-repeat;
            margin:0 auto 0 auto;
            width:300px;
            height:55px;
        }
        #arriba{
            background-image:URL("arriba.png");
        }
        #abajo{
            background-image:URL("abajo.png");
        }
 
        #centro{
            
            background-image:URL("centro.png");
            background-repeat:repeat-y;
            overflow:auto;
            margin:0 auto 0 auto;
            width:300px;
        }
        </style>
    </head>
    <body>
        <div id="arriba">
        </div>
        <div id="centro">
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
            <p>TEXTO<br></p>
        </div>
        <div id="abajo">
        </div>
    </body>
</html>
 

Listo con eso creas tus divss te paso las imagenes que yo hice para que lo pruebes
abajo.png
http://imageshack.us/photo/my-images/810/abajoi.png/
arriba.png
http://imageshack.us/photo/my-images/853/arriba.png/
centro.png
http://imageshack.us/photo/my-images/189/centroa.png/

Suerte...!

[ShamanHero]

Muchisimas gracias por la ayuda a ambos, he hecho exactamente lo que dicen los dos y me ha resultado de maravilla!

Quisiera ahora aprender a hacer un slide de imagenes, pero posteare en el lugar correspondiente para evitar problemas y evitar cambiarle la direccion al post

Muchas gracias a ambos por darse el tiempo de ayudarme :)