Foros del Web » Creando para Internet » CSS »

Como asegurarse de que una imagen se repite de forma íntegra?

Estas en el tema de Como asegurarse de que una imagen se repite de forma íntegra? en el foro de CSS en Foros del Web. Tengo un blog estructurado de la siguiente manera: ______ | A | --------- | B | --------- | C | --------- Donde A y C ...
  #1 (permalink)  
Antiguo 08/04/2011, 17:45
 
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 13 años
Puntos: 0
Pregunta Como asegurarse de que una imagen se repite de forma íntegra?

Tengo un blog estructurado de la siguiente manera:
______
| A |
---------
| B |
---------
| C |
---------

Donde A y C contienen imagenes estáticas (cabecera y footer del blog) que deberían unirse con B para formar una imagen sin costuras. En B, por supuesto, está el fondo del contenido del blog (los posts) así que contiene una imagen que se repite para adaptarse a la longitud variable del post. El problema es que para obtener una imagen sin costuras la imagen en B debería de repetirse al 100% en lugar de quedar cortada por C, el comportamiento habitual usando simplemente repeat-y.

Existe alguna manera, por lo tanto, de asegurarse de que cada vez que se repita lo haga al 100%?
  #2 (permalink)  
Antiguo 10/04/2011, 14:02
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Como asegurarse de que una imagen se repite de forma íntegra?

no entiendo que queres decir. nose que imagenes tenes y como se cose una con otra. a lo mejor posteando unas capturas podras obtener una ayuda más precisa. saludos.
  #3 (permalink)  
Antiguo 10/04/2011, 16:13
 
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 13 años
Puntos: 0
Respuesta: Como asegurarse de que una imagen se repite de forma íntegra?

La página es esta:
http://sgt08film.blogspot.com/

Actualmente usa un fondo sustituto en el medio, no el que quiero usar. El problema que tengo, a ver si esta vez me explico mejor, es que la última repetición del fondo queda cortada a la mitad, como aquí:
http://fourize.co.uk/test/mb.html
  #4 (permalink)  
Antiguo 10/04/2011, 16:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Como asegurarse de que una imagen se repite de forma íntegra?

prueba con esto:
Código HTML:
Ver original
  1. <div id="header"></div>
  2. <div id="cuerpo">
  3. ...
  4. contenido
  5. ...
  6. <div id="footer"></div>
  7. </div>
Código CSS:
Ver original
  1. #cuerpo{
  2. position:relative;
  3. overflow:visible;
  4. margin-bottom:100px;
  5. background:url('ruta/imagenquerepites.xxx') 0 0 repeat-y;
  6. }
  7. #footer{
  8. position:absolute;
  9. height:100px;
  10. left:0;
  11. bottom:-100px;
  12. background:url('ruta/imagendelfooter.png') 0 0 no-repeat;
  13. }
La primera repetición se verá bien ya que #header esta pegado a #cuerpo
La última repetición se verá completa ya que ubicamos #footer pegado al bottom de #cuerpo.

A imagendelfooter.png le das un degradado de alpha=100(abajo) a alpha=0(arriba) en photoshop. para que se fusione con el fondo repetido.

No lo probé pero debería funcionar. Pruébalo y me cuentas.

Un abrazo.

Última edición por cristian_cena; 10/04/2011 a las 16:31

Etiquetas: formulario
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




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