CSS
Antecedentes

Introducción

Sintaxis

• fondo-color: color | transparente | inicial | heredar;
• imagen de fondo: url | ninguno | inicial | heredar;
• posición de fondo: valor;
• tamaño de fondo: <tamaño-tamaño> [tamaño-tamaño>]
• <bg-size>: auto | longitud | cubierta | contener | inicial | heredar;
• repetición de fondo: repetir | repetir-x | repetir y no repetir inicial | heredar;
• origen-fondo: caja de relleno | caja de frontera | caja de contenido | inicial | heredar;
• clip de fondo: cuadro de borde | caja de relleno | caja de contenido | inicial | heredar;
• fondo-archivo adjunto: desplazamiento | fijo | local | inicial | heredar;
• de fondo: bg-color bg-image position / bg-size bg-repeat bg-origin bg-clip bg-attachment inicial | heredar;

Observaciones

Color de fondo

El background-color propiedad establece el color de fondo de un elemento utilizando un valor de color o por medio de palabras clave, tales como la transparent , inherit o initial .

• transparente , especifica que el color de fondo debe ser transparente. Esto es por defecto

• heredar , hereda esta propiedad de su elemento padre.

• inicial , establece esta propiedad en su valor predeterminado.

Esto se puede aplicar a todos los elementos, y ::first-letter pseudo-elementos de ::first-letter / ::first-line .

Los colores en CSS se pueden especificar por diferentes métodos .

Nombres de colores

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• El ejemplo utilizado anteriormente es una de las varias formas en que CSS tiene que representar un solo color.

Códigos de color hexadecimales

El código hexadecimal se utiliza para indicar los componentes RGB de un color en notación hexadecimal de base 16. # ff0000, por ejemplo, es rojo brillante, donde el componente rojo del color es de 256 bits (ff) y las partes verde y azul correspondientes del color son 0 (00).

Si ambos valores en cada uno de los tres emparejamientos RGB (R, G y B) son iguales, entonces el código de color se puede acortar en tres caracteres (el primer dígito de cada emparejamiento). #ff0000 puede reducirse a #f00 , y #ffffff puede reducirse a #fff .

La notación hexadecimal no distingue entre mayúsculas y minúsculas.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Otra forma de declarar un color es usar RGB o RGBa.

RGB significa rojo, verde y azul, y requiere de tres valores separados entre 0 y 255, colocados entre paréntesis, que se correspondan con los valores de color decimales de rojo, verde y azul respectivamente.

RGBa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Otra forma de declarar un color es usar HSL o HSLa y es similar a RGB y RGBa.

HSL significa tono, saturación y luminosidad, y también a menudo se llama HLS:

• El tono es un grado en la rueda de color (de 0 a 360).
• La saturación es un porcentaje entre 0% y 100%.
• La ligereza es también un porcentaje entre 0% y 100%.

HSLa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interacción con imagen de fondo.

Las siguientes afirmaciones son todas equivalentes:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Todos llevarán al color rojo que se muestra debajo de la imagen, donde las partes de la imagen son transparentes o la imagen no se muestra (tal vez como resultado de background-repeat del background-repeat ).

Tenga en cuenta que lo siguiente no es equivalente:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Aquí, el valor del background anula su background-image .

Para obtener más información sobre la propiedad de background , consulte la taquigrafía de fondo

Imagen de fondo

La propiedad de background-image se utiliza para especificar una imagen de fondo que se aplicará a todos los elementos coincidentes. Por defecto, esta imagen está en mosaico para cubrir todo el elemento, excluyendo el margen.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Para usar varias imágenes como background-image , defina url() separado por comas url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Las imágenes se apilarán según su orden, con la primera imagen declarada sobre las demás y así sucesivamente.

Más CSS para la imagen de fondo

Estos siguientes atributos son muy útiles y casi esenciales también.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Gradientes de fondo

Los gradientes son nuevos tipos de imágenes, agregados en CSS3. Como imagen, los gradientes se configuran con la propiedad de background-image background o la taquigrafía de background .

Existen dos tipos de funciones de degradado, lineal y radial. Cada tipo tiene una variante de no repetición y una variante de repetición:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

gradiente lineal()

Un linear-gradient tiene la siguiente sintaxis

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Por ejemplo, esto crea un degradado lineal que comienza desde la derecha y las transiciones de rojo a azul

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Puede crear un gradiente diagonal declarando una posición inicial horizontal y vertical.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Es posible especificar cualquier número de paradas de color en un degradado separándolas con comas. Los siguientes ejemplos crearán un degradado con 8 paradas de color.

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

gradiente radial ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Gradientes de repetición

Las funciones de degradado de repetición toman los mismos argumentos que los ejemplos anteriores, pero colocan el degradado en mosaico en el fondo del elemento.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Tenga en cuenta que los códigos de color HEX, RGB, RGBa, HSL y HSLa pueden usarse en lugar de los nombres de color. Los nombres de colores se utilizaron para ilustrar. También tenga en cuenta que la sintaxis de gradiente radial es mucho más compleja que la de gradiente lineal, y aquí se muestra una versión simplificada. Para una explicación completa y especificaciones, vea los documentos de MDN

Taquigrafía de fondo

La propiedad de background se puede utilizar para establecer una o más propiedades relacionadas con el fondo:

El orden de los valores no importa y cada valor es opcional.

Sintaxis

La sintaxis de la declaración abreviada de fondo es:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Ejemplos

background: red;

Simplemente configurando un background-color con el valor red .

background: border-box red;

Configuración de un background-clip en el cuadro de borde y un background-color en rojo.

background: no-repeat center url("somepng.jpg");

Establece una background-repeat en no repetición, background-origin en el centro y una background-image en una imagen.

background: url('pattern.png') green;

En este ejemplo, el background-color de background-color del elemento se establecería en green con el pattern.png , si está disponible, superpuesto en el color, repitiéndose tantas veces como sea necesario para rellenar el elemento. Si pattern.png incluye alguna transparencia, el color green será visible detrás de él.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

En este ejemplo tenemos un fondo negro con una imagen 'picture.png' en la parte superior, la imagen no se repite en ninguno de los ejes y se coloca en la esquina superior izquierda. La / después de la posición debe poder incluir el tamaño de la imagen de fondo, que en este caso se configura como ancho de 600px y automático para la altura. Este ejemplo podría funcionar bien con una imagen de entidad que puede fundirse en un color sólido.

NOTA: El uso de la propiedad de fondo abreviada restablece todos los valores de propiedad de fondo establecidos previamente, incluso si no se proporciona un valor. Si solo desea modificar un valor de propiedad de fondo previamente establecido, use una propiedad de mano larga en su lugar.

Posición de fondo

La propiedad de background-position se usa para especificar la posición inicial para una imagen de fondo o degradado

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

La posición se establece utilizando una coordenada X e Y y se establece utilizando cualquiera de las unidades utilizadas dentro de CSS.

Las unidades en CSS se pueden especificar por diferentes métodos (ver aquí ).

Propiedades de posición de fondo a largo plazo

Además de la propiedad abreviada anterior, también se pueden usar las propiedades de background-position-x largo plazo background-position-x y background-position-y . Estos le permiten controlar las posiciones x o y por separado.

NOTA: Esto es compatible con todos los navegadores excepto Firefox (versiones 31-48) 2 . Firefox 49, que se lanzará en septiembre de 2016, será compatible con estas propiedades. Hasta entonces, hay un hack de Firefox dentro de esta respuesta de desbordamiento de pila.

Adjunto de fondo

La propiedad de adjunto de fondo establece si una imagen de fondo es fija o se desplaza con el resto de la página.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Ejemplos

fondo adjunto: desplazamiento

El comportamiento predeterminado, cuando el cuerpo se desplaza, el fondo se desplaza con él:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

fondo adjunto: fijo

La imagen de fondo se fijará y no se moverá cuando se desplace el cuerpo:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

Fondo adjunto: local

La imagen de fondo del div se desplazará cuando el contenido del div se desplace.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Repetición de fondo

La propiedad de repetición de fondo establece si / cómo se repetirá una imagen de fondo.

Por defecto, una imagen de fondo se repite tanto vertical como horizontalmente.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Así es como una background-repeat: repeat-y parece:

Color de fondo con opacidad

Si establece la opacity en un elemento, afectará a todos sus elementos secundarios. Para establecer una opacidad solo en el fondo de un elemento, tendrá que usar colores RGBA. El siguiente ejemplo tendrá un fondo negro con 0.6 opacidad.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Imagen de fondo múltiple

En CSS3, podemos apilar múltiples fondos en el mismo elemento.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Las imágenes se apilarán una encima de la otra con el primer fondo en la parte superior y el último fondo en la parte posterior. img_1 estará en la parte superior, img_2 e img_3 está en la parte inferior.

También podemos usar la propiedad taquigrafía de fondo para esto:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

También podemos apilar imágenes y gradientes:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• Manifestación

La propiedad de origen-fondo.

La propiedad de origen de fondo especifica dónde se coloca la imagen de fondo.

Nota: Si la propiedad de background-attachment se establece en fixed , esta propiedad no tiene efecto.

Valor por defecto: padding-box

Valores posibles:

• padding-box - La posición es relativa a la caja de relleno
• border-box - La posición es relativa al cuadro de borde
• content-box : la posición es relativa al cuadro de contenido.
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Resultado:

Más:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Clip de fondo

Definición y uso: la propiedad background-clip especifica el área de pintura del fondo.

Valor por defecto: border-box

Valores

• border-box es el valor predeterminado. Esto permite que el fondo se extienda hasta el borde exterior del borde del elemento.
• padding-box sujeta el fondo en el borde exterior del relleno del elemento y no permite que se extienda hasta el borde;
• content-box recorta el fondo en el borde del cuadro de contenido.
• inherit aplica la configuración del padre al elemento seleccionado.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Tamaño de fondo

Visión general

La propiedad de background-size permite controlar la escala de la background-image . Toma hasta dos valores, que determinan la escala / tamaño de la imagen resultante en dirección vertical y horizontal. Si la propiedad falta, su auto considera tanto en width como en height .

auto mantendrá la relación de aspecto de la imagen, si se puede determinar. La altura es opcional y puede considerarse auto . Por lo tanto, en una imagen de 256 px × 256 px, todas las siguientes configuraciones de background-size producirían una imagen con una altura y un ancho de 50 px:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Entonces, si comenzamos con la siguiente imagen (que tiene el tamaño mencionado de 256 px × 256 px),

terminaremos con una imagen de 50 px × 50 px en la pantalla del usuario, contenida en el fondo de nuestro elemento:

También se pueden usar valores porcentuales para escalar la imagen con respecto al elemento. El siguiente ejemplo produciría una imagen dibujada de 200 px × 133 px:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

El comportamiento depende del background-origin .

Manteniendo la relación de aspecto.

El último ejemplo en la sección previos perdió su relación de aspecto original. El círculo se metió en una elipse, el cuadrado en un rectángulo, el triángulo en otro triángulo.

El enfoque de longitud o porcentaje no es lo suficientemente flexible para mantener la relación de aspecto en todo momento. auto no ayuda, ya que es posible que no sepa qué dimensión de su elemento será más grande. Sin embargo, para cubrir ciertas áreas con una imagen (y la relación de aspecto correcta) completamente o para contener una imagen con la relación de aspecto correcta completamente en un área de fondo, los valores, contain y cover proporcionan la funcionalidad adicional.

Plantas de huevo para contain y cover

Lo siento por el mal juego de palabras, pero vamos a usar una foto del día de Biswarup Ganguly para la demostración. Digamos que esta es su pantalla, y el área gris está fuera de su pantalla visible. Para demostración, vamos a asumir una proporción de 16 × 9.

Queremos utilizar la imagen del día antes mencionada como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos establecer la propiedad de background-size en una longitud fija, pero nos centraremos en contain y cover . Tenga en cuenta que también asumo que no estropeamos el ancho y / o la altura del body .

contain

contain

Escale la imagen, al tiempo que conserva su relación de aspecto intrínseca (si la hay), hasta el tamaño más grande, de manera que tanto su ancho como su altura puedan caber dentro del área de posicionamiento del fondo.

Esto asegura que la imagen de fondo siempre esté completamente contenida en el área de posicionamiento de fondo, sin embargo, podría haber algún espacio vacío lleno de su background-color en este caso:

cover

cover

Escale la imagen, conservando su relación de aspecto intrínseca (si existe), hasta el tamaño más pequeño, de modo que tanto su ancho como su altura puedan cubrir completamente el área de posicionamiento del fondo.

Esto asegura que la imagen de fondo cubra todo. No habrá ningún background-color visible, sin embargo, dependiendo de la proporción de la pantalla, se puede cortar una gran parte de su imagen:

Demostración con código actual

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Propiedad de modo de mezcla de fondo

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Vea el resultado aquí: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Sintaxis CSS: background-blend-mode: normal | multiplicar pantalla | superposición | oscurecer aclarar color-dodge | saturacion | color | luminosidad;