Foros del Web » Creando para Internet » CSS »

Fondo de capa autoajustable

Estas en el tema de Fondo de capa autoajustable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/07/2011, 01:18
 
Fecha de Ingreso: febrero-2011
Ubicación: Chile
Mensajes: 9
Antigüedad: 6 años, 7 meses
Puntos: 0
Pregunta Fondo de capa autoajustable

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:
Cita:
.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.-
  #2 (permalink)  
Antiguo 15/07/2011, 02:12
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 6 meses
Puntos: 252
Respuesta: Fondo de capa autoajustable

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.
  #3 (permalink)  
Antiguo 15/07/2011, 02:25
 
Fecha de Ingreso: febrero-2011
Ubicación: Chile
Mensajes: 9
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Fondo de capa autoajustable

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.
  #4 (permalink)  
Antiguo 15/07/2011, 05:10
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 6 meses
Puntos: 252
Respuesta: Fondo de capa autoajustable

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.
  #5 (permalink)  
Antiguo 15/07/2011, 10:49
 
Fecha de Ingreso: febrero-2011
Ubicación: Chile
Mensajes: 9
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Fondo de capa autoajustable

Cita:
Iniciado por vgonga1986 Ver Mensaje
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:
Cita:
.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.
  #6 (permalink)  
Antiguo 17/07/2011, 14:23
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 6 meses
Puntos: 252
Respuesta: Fondo de capa autoajustable

Cita:
Iniciado por ShamanHero Ver Mensaje
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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #7 (permalink)  
Antiguo 17/07/2011, 17:48
 
Fecha de Ingreso: mayo-2011
Ubicación: sinaloa
Mensajes: 150
Antigüedad: 6 años, 4 meses
Puntos: 4
Respuesta: Fondo de capa autoajustable

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:
Ver original
  1.     <head><title>tituLITO</title>
  2.         <style type="text/css">
  3.         body{
  4.             background-color:green;
  5.             margin-left:0px;
  6.             margin-right:0px;
  7.             margin-top:0px;
  8.             font-size:16px;
  9.             text-align:center;
  10.         }
  11.  
  12.         #arriba,#abajo{
  13.             background-repeat:no-repeat;
  14.             margin:0 auto 0 auto;
  15.             width:300px;
  16.             height:55px;
  17.         }
  18.         #arriba{
  19.             background-image:URL("arriba.png");
  20.         }
  21.         #abajo{
  22.             background-image:URL("abajo.png");
  23.         }
  24.  
  25.         #centro{
  26.            
  27.             background-image:URL("centro.png");
  28.             background-repeat:repeat-y;
  29.             overflow:auto;
  30.             margin:0 auto 0 auto;
  31.             width:300px;
  32.         }
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <div id="arriba">
  37.         </div>
  38.         <div id="centro">
  39.             <p>TEXTO<br></p>
  40.             <p>TEXTO<br></p>
  41.             <p>TEXTO<br></p>
  42.             <p>TEXTO<br></p>
  43.             <p>TEXTO<br></p>
  44.             <p>TEXTO<br></p>
  45.             <p>TEXTO<br></p>
  46.             <p>TEXTO<br></p>
  47.             <p>TEXTO<br></p>
  48.             <p>TEXTO<br></p>
  49.             <p>TEXTO<br></p>
  50.             <p>TEXTO<br></p>
  51.             <p>TEXTO<br></p>
  52.             <p>TEXTO<br></p>
  53.             <p>TEXTO<br></p>
  54.             <p>TEXTO<br></p>
  55.         </div>
  56.         <div id="abajo">
  57.         </div>
  58.     </body>
  59. </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...!

Última edición por yoniti7784; 17/07/2011 a las 18:09
  #8 (permalink)  
Antiguo 18/07/2011, 00:32
 
Fecha de Ingreso: febrero-2011
Ubicación: Chile
Mensajes: 9
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Fondo de capa autoajustable

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 :)

Etiquetas: ajustable, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:38.