Foros del Web » Creando para Internet » CSS »

background-repeat y background-position a la vez

Estas en el tema de background-repeat y background-position a la vez en el foro de CSS en Foros del Web. Tengo este codigo HTML: Código: <div class="center"> <div class="bottom"> <div class="top"> </div> </div> </div> CSS: Código: .top { background-image:url("../img/top.png"); background-position: top; background-repeat: no-repeat; } .bottom ...
  #1 (permalink)  
Antiguo 17/06/2009, 07:06
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 8 años, 9 meses
Puntos: 0
background-repeat y background-position a la vez

Tengo este codigo

HTML:
Código:
<div class="center">
	<div class="bottom">
		<div class="top">
		</div>
	</div>
</div>

CSS:
Código:
.top
{
	background-image:url("../img/top.png");
	background-position: top;
	background-repeat: no-repeat;
}

.bottom
{
	background-image:url("../img/bottom.png");
	background-position: bottom;
	background-repeat: no-repeat;
}

.center
{
	background-image:url("../img/center.png");
	background-repeat: repeat-y;
}
Mi problema esta en que las imagenes de background tienen transparencias y eso hace que a traves del div top y el div bottom se vea el background del div center que se repite en todo el div.
Lo que quiero saber es si existe alguna forma de utilizar el background-position para hacer que el fondo del div center empiece cuando acaba el top y termine justo antes de que empiece el bottom, o si hay alguna otra forma de hacer esto.
  #2 (permalink)  
Antiguo 17/06/2009, 07:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: background-repeat y background-position a la vez

.center { background-image:url("../img/center.png") no-repeat 10px 15px;}

El primer valor el desplazamiento en la horizontal y el segundo en la vertical.
Admite valores en px, %, em... aparte de top || left || bottom || right

Pero si lo repites en una coordenada, el valor será 0 en ella.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/06/2009 a las 07:20
  #3 (permalink)  
Antiguo 17/06/2009, 07:22
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: background-repeat y background-position a la vez

Gracias pero creo que no me has entendido del todo. A ver si me explico.
Yo tengo un div de n pixeles de alto, con un background-repeat:repeat-y que obviamente hace que se repita en ese div desde arriba hasta abajo.
Lo que quiero hacer es que ese background empiece a repetirse desde el pixel 20 empezando por arriba y pare de repetirse en el pixel n-15.
Digamos que busco una especie de padding-top y padding-bottom pero para el background.
  #4 (permalink)  
Antiguo 17/06/2009, 07:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: background-repeat y background-position a la vez

Para el pixel 20 empezando por arriba:
"Pero si lo repites en una coordenada, el valor será 0 en ella."
Para pararlo en el pixel -15:
Tampoco.

Creo que tendrás que crear un contenedor para alojar ese fondo, posicionarlo "absolute" respecto y con z-index colocarlo "debajo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 17/06/2009, 07:34
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: background-repeat y background-position a la vez

Entonces de que manera puedo hacer un bloque con los bordes redondeados y sombras, que autoincremente su altura en relacion con su contenido?
  #6 (permalink)  
Antiguo 17/06/2009, 07:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: background-repeat y background-position a la vez

La sombra, con un editor de imágenes.
Esquinas redondeadas: "curved corners"
Para que su tamaño esté en función de su contenido: na darle medida en el sentido que quieras que crezca (no te olvides de añadirle un "oveflow" si todo su contenido está con "float")
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 17/06/2009, 09:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: background-repeat y background-position a la vez

Cita:
Iniciado por choosein Ver Mensaje
Entonces de que manera puedo hacer un bloque con los bordes redondeados y sombras, que autoincremente su altura en relacion con su contenido?
Quizá esta pueda ser una manera
  #8 (permalink)  
Antiguo 17/06/2009, 13:31
 
Fecha de Ingreso: febrero-2009
Mensajes: 8
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: background-repeat y background-position a la vez

Gracias a los dos por responder. A ver si con una captura me explico mejor(Quitad el espacio de http que no puedo poner links).

ht tp://img14.imageshack.us/img14/9864/sinttulo2yyv.png

El codigo es en el primer mensaje.

Me explico. Son 3 divs del mismo tamaño uno encima de otro. Lo que esta marcado con las llaves es la posicion de los backgrounds en cada div.

El problema lo tengo en que , al ser todos los divs del mismo tamaño el background del center que esta por detras de los otros dos, mezcla su sombra con la de las otros backgrounds. Y como no puedo hacer mas pequeño ese div sin encoger tambien a los otros dos queria saber si hay alguna forma de hacer que el background de ese div no coincida con los otros.
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 08:02.