La propiedad
o radial
) como imagen de fondo de un elemento HTML.
background-image
utiliza una imagen ( jpg, png, gif, svg ) o un gradiente ( linealImƔgenes jpg, png, gif
Para utilizar una imagen como fondo de un elemento HTML utilizamos esta sintaxis:
.elemento {
background-image: url(carpeta/donde/esta/la/imagen.png);
}
TambiƩn podemos utilizar una imagen como dataUri
:
.elemento {
background-image : url(data:image/png;base64,iVBORw0KGgoA.........ErkJggg==);
}
Patrones CSS
Por defecto el CSS repite (
para establecer el tamaƱo de la imagen que se repite:
background-repeat
) la imagen de fondo ( background-image
) en todas las direcciones, tantas veces como fuera necesario, hasta cubrir completamente el elemento. Es exactamente lo que hacen los patrones. Si la imagen es mƔs grande de lo necesario podemos utilizar la propiedad background-size.elemento{
background-image:url(imagen.jpg);
background-size:50px;
}
Elementos SVG
Si los elementos svg estƔn guardados en documentos .svg externos podemos utilizarlos como imagen de fondo de la misma manera como lo hacemos con las imƔgenes jpg, png, gif:
.elemento {
background-image: url(carpeta/donde/esta/la/imagen.svg);
}
TambiƩn podemos utilizar un elemento svg como dataUri
.
.data-uri-encoded{
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106px' height='122px' viewBox='41 54 106 122'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' stroke='%23ED1D24' stroke%2Dwidth='2' d='M143.099 . . . . %3C/svg%3E";
}
Esta es una herramienta muy Ćŗtil para transformar un elemento SVG en data Uri: URL-encoder for SVG
.
Solo hay que pegar el codigo SVG en el
Solo hay que pegar el codigo SVG en el
textarea
donde pone Insert your SVG: y copiar el codigo que aparece en el textarea
donde pone Ready for CSS: o Take encoded:.
Lea acerca de Patrones SVG en css
Gradientes
Otro posible valor de
:
background-image
es un gradiente lineal.elemento {
background-image: linear-gradient( #F06, #000 );
}
o un gradiente radial
:
.elemento {
background-image: radial-gradient( circle, #F06, #000 );
}
Es interesante saber que, tambiƩn en este caso, podemos crear patrones repetitivos
utilizando
background-image
y gradientes.
Vea esta galerĆa de patrones CSS creados utilizando gradientes: CSS3 Patterns Gallery.
ImÔgenes de fondo múltiples
En el CSS3 podemos utilizar varias imƔgenes de fondo para un solo elemento. Para esto tenemos que separar los url de las varias imƔgenes con una coma.
background: url( imagen1.gif ), url( imagen2.gif ), url( imagen3.gif );
El orden de apilamiento
Las imƔgenes aparecen apiladas, una encima de otra, de esta manera: la primera imagen (
imagen1.gif
) esta encima de la segunda ( imagen2.gif
), que esta encima de la tercera ( imagen3.gif
) y asĆ sucesivamente.#multiple.bgmultiple{
width:150px;
height:150px;
border:1px solid #d9d9d9;
background-repeat: no-repeat;
}
#multiple {
background-image: url(images/azul1.gif), url(images/verde2.gif), url(images/magenta3.gif);
background-position: 10px 10px;
}
<div class="bgmultiple" id="multiple"></div>
Para posicionar cada imagen de fondo en parte tenemos que utilizar la propiedad background
.
No hay comentarios.:
Publicar un comentario