Background

La propiedad background tiene atributos como:
background-color: color;
background-image: url;
background-size: x, y, auto, cover, contain.
background-position: left - top - bottom - right - center ++ left - top - bottom - right - center
background-attachment: scroll | fixed | inherit
background-clip: border-box: | padding-box | content-box
background-origin - origen de la foto (valor de arriba)

background-image: url()

Esta propiedad del background nos permite llamar una imagen por url.


background-size: 100%

Esta propiedad del background nos permite acomodar la imagen al tamaƱo que queramos.


background-size:contain

contain es lo mismo que size al 100%.


background-size:contain, background-repeat:no-repeat;

no repite la imagen.


background-size:cover;

Aplicamos lo anterior y cambiamos contain por cover.


background-position:left - top - bottom - right - center ++ left - top - bottom - right - center;

Aplicamos lo anterior y cambiamos contain por cover.

right bottom.


right top.


left top.


left bottom.


right center.


left center.


center center.


center top.


center bottom.


background-attachment:fixed;

Esta propiedad permite generar un efecto de moviento en la imagen.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.