Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

background-image CSS

La propiedad background-image utiliza una imagen ( jpg, png, gif, svg ) o un gradiente ( linealstar o radialstar ) como imagen de fondo de un elemento HTML.

Imá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 dataUristar:  
.elemento {
        background-image : url(data:image/png;base64,iVBORw0KGgoA.........ErkJggg==);
        }
Patrones CSS
Por defecto el CSS 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-sizestar para establecer el tamaño de la imagen que se repite:
.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 dataUristar.
.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 SVGstar.
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 cssstar

Gradientes

Otro posible valor de background-image  es un gradiente linealstar:
.elemento {
    background-image: linear-gradient( #F06, #000 );
  }
o un gradiente radialstar:
.elemento {
    background-image: radial-gradient( circle, #F06, #000 ); 
  }
Es interesante saber que, también en este caso, podemos crear patrones repetitivosstar 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 backgroundstar.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas