¿Como pongo una imagen de relleno en un borde?

Jahier · #1 (**permalink**) 26/06/2010, 13:24

Saludos, bueno pues estoy modificando una plantilla y trabajando sobre el archivo css, y resulta q no kiero una linea de borde de un solo color sino una con degradado y para eso prepare una imagen. Pero no se como ponerla para q aga de borde, la linea d codigo q kiero modificar es:

border-bottom: 7px solid #E1E1E1

En lugar de #E1E1E1 kiero q aparezca la imagen jpg q hace una linea de degradado.

alberduris · #2 (**permalink**) 26/06/2010, 15:14

Cita:

Iniciado por Jahier

¿Como pongo una imagen de relleno en un borde?

Me añado a la pregunta y estoy a la espera de que se responda!

allemand2 · #3 (**permalink**) 26/06/2010, 15:18

Puedes crear una nueva clase que tenga como background esa imagen con repeat, y luego colocas esa clase con un div=id en el template.

all-ill · #4 (**permalink**) 26/06/2010, 16:45

En CSS3 con la propiedad border-image.
Para obtener gradientes sin usar imágenes, en CSS hay linear-gradient, radial-gradient. Algunos navegadores incluyen sus propias propiedades (-webkit-gradient, -moz-border-image).

En versiones anteriores de CSS no se puede asignar una imagen de fondo a un borde. Hay alternativas para emular bordes con imágenes, tanto mediante CSS como mediante javascript o el uso de frameworks javascript como JQuery.

Anidar dos elementos, el interior tendrá el contenido principal, y el elemento exterior con un padding dejará ver la imagen de fondo (en lugar de padding en el elemento exterior se podría usar margin en el elemento interior).

Código CSS:

Ver original.imgborde{padding:10px; background-image:url(imagen.gif);}
.contenido{background-color:white;}

Código HTML:

Ver original<div class="imgborde"><div class="contenido">contenido</div></div>

O con un sólo elemento(aunque la imagen se verá debajo del contenido, puede servir para crear el efecto de hoja con bordes quemados, o si tiene el centro transparente a de un color sólido como puede ser el blanco no molestará si el contenido es texto):

Código CSS:

Ver original.imgborde2{padding:10px; background-image:url(imagen.gif);}

Código HTML:

Ver original<div class="imgborde2">contenido</div>

En estos ejemplos, no probados, puede ser necesario especificar las medidas (height, width) de los elementos. También se puede ajustar el padding o margin para que se vea en todos los bordes, o sólo en los que se quiera (derecho, izquierdo, superior, inferior), usar repeat, etc, según como sea la imagen que se quiere poner de fondo.

CSS Image Frames Style Tutorial
Unique CSS Borders – Boring borders step aside
Bonita técnica para lograr fondos desvanecidos o degradados

priostorres · #5 (**permalink**) 25/10/2015, 11:36

Hola yo tengo este código pero el degradado aparece en toda la tabla no sé que hago mal

<div class="imgborde2"padding: 10px;
background-image: url(Mis%20imagenes/Amargura/bode1.png);
top: repeat;
right: repeat;
botton:repeat;
left:repeat;></div>

<head>
<style type="text/css">
.imgborde2{
padding: 10px;
background-image: url(Mis%20imagenes/Amargura/bode1.png);
top: repeat;
right: repeat;
botton:repeat;
left:repeat;
}

dartcoupli · #6 (**permalink**) 02/11/2015, 15:17

Hola.

He encontrado esto, donde viene ejemplos bastante buenos, he probado el que tú buscas, (viene un ejemplo en la web) y funciona bastante bien, no se si es el resultado que buscas exactamente, en el caso que no lo sea avisarme. Pero se acerca a lo que buscas.

http://www.mclibre.org/consultar/amaya/css/css3_bordes.html

Saludos.