Propiedades de CSS relacionadas con el fondo

Articles

Este artículo explica las propiedades de CSS relacionadas con el fondo.

Puedes aprender cómo describir propiedades como la configuración del fondo, la posición y la repetición.

YouTube Video

Creando HTML para vista previa

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Fondo y Decoración

Propiedad `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

La propiedad background-color se usa en CSS para establecer el color de fondo de un elemento. Puedes especificar el color que se muestra detrás del texto y otros elementos, y los colores se pueden definir en varios formatos. El método para especificar colores es similar a la propiedad color, pero también puedes especificar un fondo completamente transparente usando transparent.

Explicación:

La clase red-example especifica el color de fondo como rojo utilizando una palabra clave.
La clase hex-example especifica el color de fondo utilizando un código hexadecimal.
La clase rgb-example especifica el color de fondo utilizando el formato RGB.
La clase rgba-example especifica el color de fondo utilizando el formato RGBA, agregando transparencia.
La clase hsl-example especifica el color de fondo utilizando el formato HSL.
La clase hsla-example especifica el color de fondo utilizando el formato HSLA, agregando transparencia.
La clase transparent-example establece el fondo como transparente.

Propiedad `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

La propiedad background-image se utiliza para establecer una imagen como fondo de un elemento. La imagen especificada se muestra como fondo del elemento, y su tamaño, posición y método de repetición pueden ajustarse con otras propiedades relacionadas. También explicaremos más adelante propiedades relacionadas como background-size, background-position y background-repeat.

Explicación:

La clase background-image-example utiliza la propiedad background-image para establecer image.jpg como fondo. background-size: cover hace que la imagen cubra todo el elemento, y background-position: center centra la imagen. La repetición se desactiva usando background-repeat: no-repeat.
La clase background-image-gradient utiliza linear-gradient() para establecer un degradado de fondo de rojo a azul. El degradado se muestra de izquierda a derecha.

Tipos de Valores que Se Pueden Especificar

La propiedad background-image puede tomar los siguientes valores.

url(): Especifica la URL de la imagen de fondo. Incluye el archivo de imagen dentro de url(). (ex.url('image.jpg'))
none: Especifica no establecer una imagen de fondo. Este es el valor predeterminado.
Degradados: También es posible establecer degradados como imágenes de fondo utilizando las características de degradado de CSS. (ex.linear-gradient(), radial-gradient())

Puntos clave de la propiedad `background-image`

Tamaño y posición de la imagen: El tamaño y la posición de las imágenes de fondo pueden controlarse con precisión mediante otras propiedades, lo que permite ajustes en el diseño. Por ejemplo, especificar background-size: cover estira la imagen para cubrir todo el área, eliminando cualquier recorte.
Usar degradados: En lugar de una imagen, puedes usar un degradado como fondo, añadiendo un elemento dinámico al diseño.

Propiedad `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

La propiedad background-position se utiliza para especificar la posición de una imagen de fondo dentro de un elemento. Al controlar dónde aparece la imagen de fondo dentro del elemento, puedes crear diseños que coincidan con tu diseño. El valor predeterminado es 0% 0%, colocando la imagen en la esquina superior izquierda.

Explicación:

La clase top-left-example especifica la posición de la imagen como top left, colocando la imagen en la esquina superior izquierda.
La clase center-example posiciona la imagen en el centro utilizando el atributo center.
La clase bottom-right-example especifica la posición de la imagen como bottom right, colocando la imagen en la esquina inferior derecha.

Tipos de Valores que Se Pueden Especificar

La propiedad background-position puede tomar los siguientes tipos de valores.

Palabras clave: Puedes especificar left, right, top, bottom, center.
- Especificar center colocará la imagen de fondo en el centro del elemento.
- Especificar right colocará la imagen de fondo en el lado derecho.
- Especificar top left colocará la imagen de fondo en la esquina superior izquierda.
- Especificar bottom right colocará la imagen de fondo en la esquina inferior derecha.
Longitud o porcentaje: Puedes especificar valores como 10px 20px, 50% 50%.
- Especificar 10px 20px colocará la imagen de fondo a 10px desde la izquierda y 20px desde la parte superior.
- Especificar 50% 50% centrará la imagen de fondo tanto horizontal como verticalmente.
Función calc(): Permite posiciones más precisas utilizando cálculos en CSS.

La propiedad `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

La propiedad background-size se utiliza para especificar el tamaño de una imagen de fondo de un elemento. Al usar esta propiedad, puedes ajustar cómo se muestra la imagen de fondo, ya sea para que llene todo el elemento o mantenga su tamaño original, para adaptarse al diseño. El valor predeterminado es auto, que mantiene el tamaño original de la imagen de fondo.

Explicación:

La clase cover-example especifica cover. La imagen se ampliará para cubrir todo el elemento, pero partes de ella pueden ser recortadas.
La clase contain-example especifica contain. La imagen se ajustará para encajar dentro del elemento, pero podría aparecer espacio en blanco.
La clase fixed-size-example especifica un tamaño fijo para la imagen de fondo, estableciendo el ancho y la altura en 100px cada uno.

Tipos de Valores que Se Pueden Especificar

A la propiedad background-size se le pueden asignar los siguientes tipos de valores.

Palabras clave
- auto: Conserva el tamaño predeterminado de la imagen (el ancho y el alto se determinan automáticamente).
- cover: Ajusta el tamaño de la imagen de fondo para cubrir completamente el elemento. Llenará todo el elemento, pero partes de la imagen pueden ser recortadas.
- contain: Ajusta la imagen para encajar dentro del elemento, pero no cubre todo el elemento. La proporción de aspecto de la imagen se mantiene.
Valores numéricos (px, %, em, etc.)
- Ancho y Alto: Especifica el ancho y el alto explícitamente. Si solo se especifica un valor, se aplica al ancho y el alto se ajusta automáticamente.
- Porcentaje: Especifica el tamaño de la imagen de fondo como un porcentaje del tamaño del elemento. Por ejemplo, 50% 50% establece la imagen en la mitad del ancho y alto del elemento.

Propiedad `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

La propiedad background-repeat se utiliza para controlar cómo se repite la imagen de fondo de un elemento. De forma predeterminada, la imagen de fondo se repite horizontal y verticalmente dentro del elemento, pero puedes personalizar el comportamiento de repetición usando esta propiedad.

Explicación:

La clase repeat-example muestra la imagen repetida tanto vertical como horizontalmente.
La clase repeat-x-example repite la imagen solo horizontalmente.
La clase no-repeat-example muestra la imagen solo una vez sin repetir.
La clase space-example organiza las imágenes de fondo uniformemente con espacios iguales entre ellas.
La clase round-example redimensiona automáticamente la imagen de fondo para repetirla y llenar todo el elemento.

Valores que se pueden especificar

A la propiedad background-repeat se le pueden asignar los siguientes tipos de valores.

repeat: La imagen de fondo se repite a lo largo del eje X (horizontal) y del eje Y (vertical). Este es el valor predeterminado.
repeat-x: La imagen de fondo se repite solo a lo largo del eje X (horizontal).
repeat-y: La imagen de fondo se repite solo a lo largo del eje Y (vertical).
no-repeat: La imagen de fondo no se repite y se muestra solo una vez.
space: La imagen de fondo se repite a intervalos regulares, con espacios iguales entre cada repetición.
round: La imagen de fondo se repite, pero el tamaño se ajusta para llenar todo el elemento. La imagen puede ser redimensionada.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con el modelo de caja Propiedades de CSS relacionadas con la decoración del modelo de caja

Propiedades de CSS relacionadas con el fondo

YouTube Video

Creando HTML para vista previa

Fondo y Decoración

Propiedad background-color

Explicación:

Propiedad background-image

Explicación:

Tipos de Valores que Se Pueden Especificar

Puntos clave de la propiedad background-image

Propiedad background-position

Explicación:

Tipos de Valores que Se Pueden Especificar

La propiedad background-size

Explicación:

Tipos de Valores que Se Pueden Especificar

Propiedad background-repeat

Explicación:

Valores que se pueden especificar

YouTube Video

Propiedad `background-color`

Propiedad `background-image`

Puntos clave de la propiedad `background-image`

Propiedad `background-position`

La propiedad `background-size`

Propiedad `background-repeat`