Foros del Web » Creando para Internet » CSS »

Repetir solo una parte del Background

Estas en el tema de Repetir solo una parte del Background en el foro de CSS en Foros del Web. Hola! Me preguntaba como hacer para repetir un fondo, del cual solo se muestra una parte, me explico... Supongamos que tengo un textbox sin borde ...
  #1 (permalink)  
Antiguo 12/04/2012, 02:40
Avatar de BillieBert  
Fecha de Ingreso: diciembre-2011
Mensajes: 37
Antigüedad: 12 años, 4 meses
Puntos: 1
Repetir solo una parte del Background

Hola!

Me preguntaba como hacer para repetir un fondo, del cual solo se muestra una parte, me explico...

Supongamos que tengo un textbox sin borde y con un fondo con dos barras, la superior y la inferior. Antes del input tengo un div con estilo, el cual tiene una barra vertical con bordes redondeados. Después del input tengo lo mismo que antes, pero del otro lado.

El ejemplo utilizaría 3 imagenes, que serían las siguientes:



De esta forma se puede facilmente obtener un input con un estilo mas bonito, y tal, se puede repetir el background de enmedio horizontalmente, y se obtienen diferentes tamaños, pero... ¿hay alguna forma para darle estilo, utilizando un solo archivo...?



Lo que busco es que al cargarse la imagen todo el input se vea de una vez, y no tener que esperar a que se carguen las otras dos imagenes.

Sé que se puede poner un Background a partir de una posición, pero no se como hacer para que se repita solo una parte del background, no se me ocurre como buscar solución a esto, ojalá que me puedan ayudar :)
__________________
La religión y la política pasaron de moda. Lo de hoy es el arte y el idealismo.
  #2 (permalink)  
Antiguo 12/04/2012, 03:04
Avatar de davemtc  
Fecha de Ingreso: mayo-2011
Ubicación: Valencia
Mensajes: 20
Antigüedad: 13 años
Puntos: 2
Respuesta: Repetir solo una parte del Background

Puedes usar CSS3 para utilizar varios backgrounds:

background: url(fondo3.png) bottom right no-repeat,
url(fondo2.png) center no-repeat,
url(fondo1.gif) center repeat;
width: 300px;

O si solo quieres darle borde puedes utilizar border-radius.

Ten en cuenta que esto es CSS3 en navegadores viejos no funcionan bien.
  #3 (permalink)  
Antiguo 12/04/2012, 14:14
Avatar de BillieBert  
Fecha de Ingreso: diciembre-2011
Mensajes: 37
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: Repetir solo una parte del Background

Lo que quiero es evitar tener que utilizar 3 archivos de imagen diferentes, que sea solo uno para que se vea todo el diseño una vez que se cargue esa imagen
__________________
La religión y la política pasaron de moda. Lo de hoy es el arte y el idealismo.

Etiquetas: parte, repetir, tamaño, 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




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