Fundamentos CSS | Máster en Diseño Web | Módulo III Programación Frontend

Módulo III
Programación Frontend

Background & Gradients

Imágenes de fondo

CSS nos permite hacer mucho más con el background de un elemento que simplemente asignarle un color plano.

Gracias a la propiedad background-image podremos asignar imágenes de fondo, pero eso es solo el comienzo.

background-color - <color value>
background-image - <url (location of image)> | none
background-repeat - repeat | repeat-x | repeat-y | no-repeat
background-position - <length measurement> | <percentage> | left | center | right | top | bottom
background-attachment - scroll | fixed | local
background-clip - border-box | padding-box | content-box
background-origin - border-box | padding-box | content-box
background-size - <length> | <percentage> | auto | cover | contain

* Nuevos en CSS3

background-image


      div { background-image: url(img/dalek.png); }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, unde! Eum debitis quaerat voluptas itaque laborum alias ut animi. Harum necessitatibus similique id ullam distinctio cumque accusantium nostrum nisi. Accusamus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, maxime sunt deserunt illum architecto! Consequatur ut debitis nesciunt adipisci, ad maxime eligendi itaque fugiat ea repellat odit voluptatum corporis blanditiis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quod, id dolore ad asperiores!

background-repeat


div { background-repeat: repeat; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-repeat: repeat-x; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-repeat: repeat-y; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-repeat: no-repeat; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

background-position


div { background-position: 15% 200px; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-position: center; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-position: left top; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-position: right bottom; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-position: right 100px bottom 20px; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

background-attachment


div { background-attachment: scroll; }

Ver ejemplo »


div { background-attachment: fixed; }

Ver ejemplo »


div { background-attachment: local; }

Ver ejemplo »

background-clip


      div { background-clip: border-box; }


      div { background-clip: padding-box; }


      div { background-clip: content-box; }

background-origin


div { background-origin: border-box; }


div { background-origin: padding-box; }


div { background-origin: content-box; }

background-size


div { background-size: 50px 200px; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-size: 100% 50%; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-size: auto 100%; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-size: 100% auto; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-size: cover; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div { background-size: contain; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

Propiedad background

Como sucede con otras propiedades, podemos utilizar la propiedad background para agrupar varias propiedades de las antes mencionadas.

Todas las propiedades son opcionales y pueden ir en cualquier orden, excepto los valores de background-position, primero siempre va el horizontal seguido inmediatamente del vertical.

Hay que tener en cuenta que si omitimos un valor se asignará el valor por defecto de esa propiedad.


div {
  background-color: #ccc;
  background-image: url(megaman.png);
  background-repeat: no-repeat;
  background-position: center top;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!


div {
  background: #ccc url(megaman.png) no-repeat center top;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

Multiples imágenes de fondo

Podemos utilizar más de una imágen de fondo simplemente separando los valores con una coma.

Si asignamos más de una propiedad relativa al background tenemos que cuidar que el orden sea el mismo para todas las propiedades.

Si algunas de las imágenes se superponen será la primera de la lista la que quede al frente y el resto le seguirán en orden.


div {
  background:
    url(day-06/dalek.png) 140px top,
    url(day-06/megaman.png) 120px 100px;

  background-repeat: no-repeat;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ipsum.

cum praesentium temporibus debitis odit ipsam est, libero eaque hic magnam! Adipisci, repudiandae, quisquam!

Práctica

Links relacionados

background-attachment — Chris Coyier
http://css-tricks.com/css3-gradients/

Máster en Diseño Web | Módulo III | Introducción I

Módulo III Programación Frontend

Background & Gradients

Imágenes de fondo

background-image

background-repeat

background-position

background-attachment

background-clip

background-origin

background-size

Propiedad background

Multiples imágenes de fondo

Práctica

Links relacionados

Módulo III
Programación Frontend