Git es un sistema de control de versiones distribuido que ayuda a los desarrolladores a colaborar en proyectos de cualquier escala.

Linus Torvalds, el desarrollador del kernel de Linux, creó Git en 2005 para ayudar a controlar el desarrollo de este.

¿Qué es un sistema de control de versiones distribuido?

Un sistema de control de versiones distribuido es un sistema que ayuda a realizar un seguimiento de los cambios hechos en los archivos de tu proyecto.

Este historial de cambios vive en tu máquina local y te permite volver a una versión anterior de tu proyecto con facilidad en caso de que algo salga mal.

Git facilita la colaboración. Cada miembro del equipo puede mantener una copia de seguridad completa de los repositorios en los que está trabajando en su máquina local. Luego, gracias a un servidor externo como BitBucket, GitHub o GitLab, puede almacenar el repositorio de forma segura en un solo lugar.

De esta forma, diferentes miembros del equipo pueden copiarlo localmente y todos tienen una clara visión general de todos los cambios realizados por todo el equipo.

Git tiene muchos comandos diferentes que puedes usar. Y descubrí que estos cincuenta son los que uso con más frecuencia (y, por lo tanto, son los más útiles para recordar).

Así que los anoté y pensé que sería bueno compartirlos con la comunidad. Espero que los encuentres útiles – Disfrútalos.

Cómo verificar tu configuración de Git:

El siguiente comando devuelve una lista de información sobre tu configuración de Git, incluido el nombre de usuario y el correo electrónico:

git config -l

Cómo configurar tu nombre de usuario de Git:

Con el siguiente comando puedes configurar tu nombre de usuario:

git config --global user.name "Fabio"

Cómo configurar tu usuario de correo electrónico de Git:

Este comando te permite configurar la dirección de correo electrónico del usuario que utilizarás en tus confirmaciones.

git config --global user.email "inscripciones@fabiopacifici.com"

Cómo almacenar en caché tus credenciales de inicio de sesión en Git:

Puedes almacenar las credenciales de inicio de sesión en el caché para que no tengas que escribirlas cada vez. Solo usa este comando:

git config --global credential.helper cache

Cómo inicializar un repositorio Git:

Todo comienza desde aquí. El primer paso es inicializar un nuevo repositorio de Git localmente en la raíz de tu proyecto. Puedes hacerlo con el siguiente comando:

git init

Cómo agregar un archivo al área de preparación en Git:

El siguiente comando agregará un archivo al área de preparación. Simplemente, reemplaza el nombre_de_archivo_aquí con el nombre del archivo que deseas agregar al área de preparación.

git add nombre_de_archivo_aquí

Cómo agregar todos los archivos en el área de preparación en Git

Si deseas agregar todos los archivos de tu proyecto al área de preparación, puedes usar un comodín . y cada archivo se agregará para ti.

git add .

Cómo agregar ciertos archivos al área de preparación en Git

Con el asterisco en el siguiente comando, puedes agregar todos los archivos que comienzan con fil en el área de preparación.

git add fil*

Cómo verificar el estado de un repositorio en Git:

Este comando mostrará el estado del repositorio actual, incluidos los archivos preparados, no preparados y sin seguimiento.

git status

Cómo confirmar cambios en el editor en Git:

Este comando abrirá un editor de texto en la terminal donde podrás escribir un mensaje de confirmación completo.

Un mensaje de confirmación se compone de un breve resumen de los cambios, una línea vacía y una descripción completa de los cambios posteriores.

git commit

Cómo confirmar cambios con un mensaje en Git:

Puedes agregar un mensaje de confirmación sin abrir el editor. Este comando solo te permite especificar un breve resumen para tu mensaje de confirmación.

git commit -m "tu mensaje de confirmación aquí"

Cómo confirmar cambios (y omitir el área de preparación) en Git:

Puedes agregar y confirmar archivos rastreados con un solo comando utilizando las opciones -a y -m.

git commit -a -m"tu mensaje de confirmación aquí"

Cómo ver tu historial de confirmaciones en Git:

Este comando muestra el historial de confirmación del repositorio actual:

git log

Cómo ver tu historial de confirmaciones, incluidos los cambios en Git:

Este comando muestra el historial de confirmaciones, incluidos todos los archivos y sus cambios:

git log -p

Cómo ver una confirmación específica en Git:

Este comando muestra una confirmación específica.

Reemplaza commit-id con el id de la confirmación que se encuentra en el registro de confirmación después de la palabra commit.

git show commit-id

Cómo ver las estadísticas de registro en Git:

Este comando hará que el registro de Git muestre algunas estadísticas sobre los cambios en cada confirmación, incluidas las líneas cambiadas y los nombres de los archivos.

git log --stat

Cómo ver los cambios realizados antes de confirmarlos usando "diff" en Git:

Puedes pasar un archivo como parámetro para ver solo los cambios en un archivo específico.
git diff muestra solo los cambios sin preparar de forma predeterminada.

Podemos llamar a diff con el indicador --staged para ver cualquier cambio por etapas.

git diff
git diff mi_archivo.py
git diff --staged

Cómo ver los cambios usando "git add -p":

Este comando abre un aviso y te pregunta si deseas realizar cambios o no, e incluye otras opciones.

git add -p

Cómo eliminar archivos rastreados del árbol de trabajo actual en Git:

Este comando espera un mensaje de confirmación para explicar por qué se eliminó el archivo.

git rm nombre_del_archivo

Cómo cambiar el nombre de los archivos en Git:

Este comando prepara los cambios, luego espera un mensaje de confirmación.

git mv archivo_viejo archivo_nuevo

Cómo ignorar archivos en Git:

Crea un archivo .gitignore y confírmalo.

Cómo revertir cambios no preparados en Git:

git checkout nombre_del_archivo

Cómo revertir los cambios por etapas en Git:

Puedes usar el indicador  -p para especificar los cambios que deseas restablecer.

git reset HEAD nombre_del_archivo
git reset HEAD -p

Cómo modificar la confirmación más reciente en Git:

git commit --amend te permite modificar y agregar cambios a la confirmación más reciente.

git commit --amend

!Nota!: Arreglar una confirmación local con ammend es excelente y puedes enviarlo a un repositorio compartido después de que lo hayas arreglado. Pero debes evitar modificar las confirmaciones que ya se han hecho públicas.

Cómo revertir la última confirmación en Git:

git revert creará una nueva confirmación que es lo opuesto a todo en la confirmación dada. Podemos revertir la última confirmación usando el alias principal como este:

git revert HEAD

Cómo revertir una confirmación antigua en Git:

Puedes revertir una confirmación anterior usando su id de confirmación. Esto abre el editor para que pueda agregar un mensaje de confirmación.

git revert confirmación_id_aquí

Cómo crear una nueva rama en Git:

Por defecto, tienes una rama, la rama principal. Con este comando, puedes crear una nueva rama. Git no lo cambiará automáticamente; deberás hacerlo manualmente con el siguiente comando.

git branch nombre_de_la_rama

Cómo cambiar a una rama recién creada en Git:

Cuando quieras usar una rama diferente o recién creada, puedes usar este comando:

git checkout nombre_de_la_rama

Cómo listar ramas en Git:

Puedes ver todas las ramas creadas usando el comando git branch. Mostrará una lista de todas las ramas y marcará la rama actual con un asterisco y la resaltará en verde.

git branch

Cómo crear una rama en Git y cambiar a ella inmediatamente:

Con un solo comando, puedes crear y cambiar a una nueva rama de inmediato.

git checkout -b nombre_de_la_rama

Cómo eliminar una rama en Git:

Cuando hayas terminado de trabajar con una rama y la hayas fusionado, puedes eliminarla usando el siguiente comando:

git branch -d nombre_de_la_rama

Cómo fusionar dos ramas en Git:

Para fusionar el historial de la rama en la que te encuentras actualmente con el nombre_de_otra_rama, debes usar el siguiente comando:

git merge nombre_de_otra_rama

Cómo mostrar el registro de confirmación como un gráfico en Git:

Podemos usar --graph para que el registro de confirmación se muestre como un gráfico. Además, --oneline limitará los mensajes de confirmación a una sola línea.

git log --graph --oneline

Cómo mostrar el registro de confirmación como un gráfico de todas las ramas en Git:

Hace lo mismo que el comando anterior, pero para todas las ramas.

git log --graph --oneline --all

Cómo cancelar una fusión conflictiva en Git:

Si deseas descartar una fusión y comenzar de nuevo, puedes ejecutar el siguiente comando:

git merge --abort

Cómo agregar un repositorio remoto en Git

Este comando agrega un repositorio remoto a tu repositorio local (simplemente reemplaza https://repositorio_aquí con la URL de su repositorio remoto).

git add remote https://repositorio_aquí

Cómo ver las URL remotas en Git:

Puedes ver todos los repositorios remotos de tu repositorio local con este comando:

git remote -v

Cómo obtener más información sobre un repositorio remoto en Git:

Simplemente reemplaza origin con el nombre del repositorio remoto obtenido al ejecutar el comando git remote -v.

git remote show origin

Cómo enviar cambios a un repositorio remoto en Git:

Cuando todo tu trabajo esté listo para guardarse en un repositorio remoto, puedes enviar todos los cambios con el siguiente comando:

git push

Cómo extraer cambios de un repositorio remoto en Git:

Si otros miembros del equipo están trabajando en tu repositorio, puedes recuperar los últimos cambios realizados en el repositorio remoto con el siguiente comando:

git pull

Cómo verificar las ramas remotas que Git está rastreando:

Este comando muestra el nombre de todas las ramas remotas que Git está rastreando para el repositorio actual:

git branch -r

Cómo obtener cambios de repositorios remotos en Git:

Este comando descargará los cambios desde un repositorio remoto, pero no realizará una fusión en tu rama local (ya que git pull lo hace en su lugar).

git fetch

Cómo verificar el registro de confirmaciones actual de un repositorio remoto en Git

Confirmación tras confirmación, Git crea un registro. Puedes encontrar el registro del repositorio remoto usando este comando:

git log origin/main

Cómo fusionar un repositorio remoto con tu repositorio local en Git:

Si el repositorio remoto tiene cambios que deseas fusionar con tu repositorio local, este comando lo hará por ti:

git merge origin/main

Cómo obtener el contenido de ramas remotas en Git sin fusionarlas automáticamente:

Esto te permite actualizar la rama remota sin fusionar ningún contenido en las ramas locales. Puedes llamar a git merge o git checkout para realizar la fusión.

git remote update

Cómo enviar una nueva rama a un repositorio remoto en Git:

Si deseas enviar una rama a un repositorio remoto, puedes usar el siguiente comando. Solo recuerda agregar -u para crear la rama upstream:

git push -u origin nombre_de_la_rama

Cómo eliminar una rama remota en Git:

Si ya no necesitas una sucursal remota, puedes eliminarla usando el siguiente comando:

git push --delete origin nombre_de_la_rama_aquí

Cómo usar Git rebase:

Puedes transferir el trabajo completado de una rama a otra usando git rebase.

git rebase nombre_de_la_rama_aquí

Git Rebase puede complicarse mucho si no lo haces correctamente. Antes de usar este comando, te sugiero que vuelvas a leer la documentación oficial aquí.

Cómo ejecutar rebase de forma interactiva en Git:

Puedes ejecutar git rebase de forma interactiva usando el indicador -i. Abrirá el editor y presentará un conjunto de comandos que puedes usar.

git rebase -i master
# p, pick = usar confirmación.
# r, reword = usar confirmación pero editar el mensaje de confirmación.
# e, edit = usar confirmación pero detenerse para modificar.
# s, squash = usar confirmación pero fusionarla con la confirmación anterior.
# f, fixup = como "squash", pero descartando el mensaje de confirmación.
# x, exec = ejecutar comando (el resto de la linea) usando shell.
# d, drop = eliminar confirmación.

Cómo forzar una solicitud push en Git:

Este comando forzará una solicitud de inserción (push). Por lo general, esto está bien para las ramas de solicitud de extracción (pull request),  porque nadie más debería haberlas clonado. Pero esto no es algo que desees hacer con repositorios públicos.

git push -f

Conclusión

Estos comandos pueden mejorar drásticamente tu productividad en Git. No tienes que recordarlos todos, por eso he escrito esta hoja de trucos. Marca esta página para futuras referencias o imprímela si lo deseas.

¡Gracias por leer! Por cierto, soy Fabio, desarrollador web full-stack, docente, y profesional certificado en automatización de IT con Python.

El método toString() es un método integrado del objeto Number de JavaScript que le permite convertir cualquier valor de tipo numérico en su representación de tipo cadena.

Cómo usar el método toString en JavaScript

Para usar el método toString(), simplemente necesitas llamar al método en un valor numérico. El siguiente ejemplo muestra cómo convertir el valor numérico 24 en su representación de cadena. Observa cómo el valor de la variable str está entre comillas dobles:

var num = 24;
var str = num.toString();

console.log(num); // 24
console.log(str); // "24"

También puedes llamar al método toString() inmediatamente en un valor numérico, pero debes agregar paréntesis () para envolver el valor o nuestro JavaScript responderá con un error de token no válido o inesperado.

El método toString() también puedes convertir números flotantes y negativos como se muestra a continuación:

24.toString(); //token no válido o inesperado 
(24).toString(); // "24"
(9.7).toString(); // "9.7"
(-20).toString(); // "-20"

Finalmente, el método toString() también acepta el parámetro radix o base. La base le permite convertir un número del sistema numérico decimal (base 10) a una cadena que representa el número en otros sistemas numéricos.

Los sistemas numéricos válidos para la conversión incluyen:

• Sistema binario (base 2) que tiene 2 dígitos, 0 y 1
• Sistema ternario (base 3) que tiene 3 dígitos 0, 1 y 2
• Sistema cuaternario (base 4) que tiene 4 dígitos, 0, 1, 2 y 3
• Y así hasta el sistema Hexatridecimal (base 36) que tiene la combinación de los números arábigos del 0 al 9 y las letras latinas de la A a la Z

Number.toString(radix);

Los parámetros de base aceptan datos de tipo numérico con valores que van del 2 al 36. Este es un ejemplo de cómo convertir el número decimal 5 a su representación de número binario (base 2):

var str = (5).toString(2);

console.log(str); // "101"

El número decimal 5 del código anterior se convierte en su número binario equivalente a 101 y luego se convierte en una cadena.

Cómo utilizar otros tipos de datos con el método toString()

Además de convertir el tipo de número, el método toString() también está disponible para convertir otros tipos de datos en tus representaciones de cadena.

Por ejemplo, puedes convertir un tipo de array en su representación de cadena de la siguiente manera:

var arr = [ "Nathan", "Jack" ];
var str = arr.toString();

console.log(str); // "Nathan,Jack"

O un tipo booleano a cadena como se muestra a continuación:

var bool = true;
var str = bool.toString();

console.log(str); // "true"

Pero creo que usarás con mayor frecuencia el método toString() para convertir un número en una cadena en lugar de los demás. Eso es lo que suelo hacer también :)

Gracias por leer este tutorial

Cuando estás diseñando un sitio web, es muy importante que tu contenido se vea bien en todos los tamaños de pantalla.

En este artículo, hablaré sobre cómo usar el diseño responsivo y las consultas de medios (media queries)* para que esto suceda. También proporcionaré ejemplos de código para consultas de medios usando anchos de pantalla máximos y mínimos.

¿Qué es el Diseño Responsivo?

El diseño responsivo es la práctica de asegurarse de que tu contenido se vea bien en todos los tamaños de pantalla. Todo en el sitio web, incluidos los diseños, las fuentes y las imágenes, debe adaptarse automáticamente al dispositivo del usuario.

A principios de la década del 2000, los desarrolladores se concentraron en asegurarse de que sus sitios web se vieran bien en pantallas de mayor tamaño, como computadoras portátiles y de escritorio. En el mundo actual, debe considerar dispositivos como teléfonos móviles, tabletas e incluso relojes.

Un componente importante del diseño responsivo son las consultas de medios.

¿Qué es una consulta de medios?

En CSS, una consulta de medios se utiliza para aplicar un conjunto de estilos en función de las características del navegador, incluidos el ancho, el alto o la resolución de la pantalla.

Puedes ver un ejemplo de una consulta de medios en la página de aprendizaje de freeCodeCamp.

Para tamaños de pantallas grandes como computadoras de escritorio, podemos ver un menú de búsqueda en la esquina superior izquierda.

Pero en los dispositivos móviles, no hay menú de búsqueda y solo tenemos las opciones de menú y el botón de inicio de sesión.

Sintaxis básica de una consulta de medios

Aquí está la sintaxis básica para una consulta de medios en CSS:

@media media-type (media-feature){
/*Los estilos van aquí*/
}

Analicemos lo que significa esta sintaxis.

El @media es un tipo de regla-At en CSS. Estas reglas dictarán cómo se verá el CSS en función de ciertas condiciones.

El tipo de medio se refiere a la categoría de medios para el dispositivo. Los diferentes tipos de medios incluyen all, print, screen y speech.

• all - funciona para todos los dispositivos
• print: funciona para dispositivos en los que el medio está en modo de vista previa de impresión
• screen - funciona para dispositivos con pantallas
• speech: funciona para dispositivos como lectores de pantalla donde el contenido se lee en voz alta al usuario

Según la documentación,

Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y el tipo all está implícito.

Puedes optar por omitir el tipo de medio y utilizar esta sintaxis en su lugar.

@media (media-feature){
/*Los estilos van aquí*/
}

La función de medios se refiere a las características del navegador, que incluyen la altura y el ancho de la ventana gráfica, la orientación o la relación de aspecto. Para obtener una lista completa de las posibles funciones multimedia, por favor visita los documentos de MDN.

Para este artículo, nos vamos a centrar en la función de medios de ancho.

Si deseas crear consultas de medios más complejas, puedes utilizar operadores lógicos.

• and - Este operador se usa para unir varias características de medios. Si todas las características de los medios son verdaderas, los estilos dentro de las llaves se aplicarán a la página.
• not - Este operador invierte una consulta verdadera en falsa y una consulta falsa en verdadera.
• , (coma) - Este operador separará varias funciones multimedia con comas y aplicará los estilos dentro de la llave si se cumple una de las condiciones.

Ejemplos de consultas de medios

Echemos un vistazo a algunos ejemplos que muestran cómo usar consultas de medios en CSS.

En este primer ejemplo, queremos que el color de fondo cambie a azul cuando el ancho del dispositivo sea de 600 px o menos.

En el CSS, queremos agregar un (ancho máximo: 600 px) para la consulta de medios que le dice a la computadora que se dirija a dispositivos con un ancho de pantalla de 600 px o menos.

Dentro de la consulta de medios, cambiamos los estilos de fondo para el body a background-color: #87ceeb;.

Aquí está la consulta de medios completa:

@media (max-width: 600px) {
  body {
    background-color: #87ceeb;
  }
}

Aquí está el ejemplo de CodePen. Puedes probarlo si haces clic en Editar en la esquina superior derecha.

En este segundo ejemplo, queremos cambiar el color de fondo de azul a rojo si el dispositivo tiene un ancho entre 600 y 768 px. Podemos usar el operador and para lograr esto.

@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: #de3163;
  }
}

Aquí está el ejemplo completo de CodePen para que lo pruebes:

Cuando lo pruebes, deberías ver que el color de fondo es azul si el ancho de la pantalla es inferior a 600 px o superior a 768 px.

¿Debería escribir consultas de medios separadas para cada dispositivo en el mercado?

La respuesta corta a esa pregunta es no.

Hay demasiados dispositivos en el mercado para intentar escribir una consulta de medios para cada dispositivo. La tecnología siempre está cambiando, lo que significa que siempre aparecerán nuevos dispositivos.

Es más importante que se dirija a una variedad de dispositivos mediante consultas de medios. En el artículo freeCodeCamp de Cem Eygi, enumera algunos puntos de interrupción comunes que se utilizan para las consultas de medios.

• 320px — 480px: dispositivos móviles
• 481px — 768px: iPads, tabletas
• 769px — 1024px: pantallas pequeñas, portátiles
• 1025px — 1200px: Computadoras de escritorio, pantallas grandes
• 1201px y más —  Pantallas extra grandes, TV

Conclusión

El diseño responsivo es la práctica de asegurarse de que tu contenido se vea bien en todos los tamaños de pantalla. Todo en el sitio web, incluidos los diseños, las fuentes y las imágenes, debe adaptarse automáticamente al dispositivo del usuario.

En CSS, una consulta de medios se utiliza para aplicar un conjunto de estilos en función de las características del navegador, incluidos el ancho, el alto o la resolución de la pantalla.

Esta es la sintaxis básica para una consulta de medios en CSS.

@media media-type (media-feature){
/*Los estilos van aquí*/
}

El tipo de medio es opcional a menos que estés utilizando los operadores lógicos not o only. Si se omite el tipo de medio, la consulta de medios se dirigirá a todos los dispositivos.

Espero que este artículo te haya resultado útil y te deseo la mejor de las suertes en tu aprendizaje con CSS.

Lo que un usuario ve en un sitio web afectará la calidad de tu experiencia de usuario. También afectará la facilidad con la que pueden usar todo el sitio en general.

Agregar imágenes al fondo de ciertas partes de un sitio web suele ser más atractivo visualmente e interesante que simplemente cambiar el color de fondo.

Los navegadores modernos admiten una variedad de tipos de archivos de imagen como .jpg, .png, .gif, y .svg.

Este artículo explica cómo agregar imágenes a tu código HTML y cómo ajustarlas para que se vean mejor.

Sintaxis de imagen de fondo

El primer paso es asegurarse de crear un directorio (carpeta) de activos para guardar las imágenes que deseas usar en tu proyecto.

Por ejemplo, podemos crear una carpeta imagen en el proyecto en el que estamos trabajando y agregar una imagen llamada puestaDeSol.png que queremos usar.

La propiedad CSS background-image te permite colocar la imagen detrás de cualquier elemento HTML que desee.

Esta podría ser la página completa (usando el selector  body en CSS que apunta al elemento <body> en nuestro HTML), o solo una parte específica e independiente de la página, como un elemento de section como en el ejemplo a continuación.

Para agregar un background-image a una etiqueta section en tu archivo .css, escriba el siguiente código:

section {
     background-image: url("imagen/puestaDeSol.png");
        }

Vamos a discutir lo que está pasando aquí en detalle:

• section especifica la etiqueta a la que desea agregar la imagen.
• url() se usa para decirle a CSS dónde se encuentra nuestra imagen.
• Dentro de los paréntesis, "imagen/puestaDeSol.png" está la ruta a la imagen. Esto le permite al navegador saber qué URL extraer.
• La ruta en este ejemplo se denomina ruta, relativa lo que significa que es un archivo local, relativo a nuestro proyecto y a nuestro directorio de trabajo actual, y no es una dirección web. Para agregar imágenes también podemos usar una ruta absoluta, que es una dirección web completa y comienza con una URL de dominio (http://www.).
• Usar comillas es un buen hábito, pero podemos omitirlas, por lo que background-image: url(imagen/puestaDeSol.png) funciona igual.
• ¡No olvides el punto y coma!

Cómo detener la repetición del fondo

Cuando aplicas una imagen de fondo a un elemento, por defecto se repetirá.

Si la imagen es más pequeña que la etiqueta de la que es fondo, se repetirá para completar la etiqueta.

¿Cómo evitamos que esto suceda?

La propiedad background-repeat toma 4 valores y podemos cambiar la dirección en la que se repite la imagen, o evitar que la imagen se repita por completo.

section {
    background-repeat: repeat;
        }

Este es el valor predeterminado si no le damos un valor a la propiedad background-repeat. En este caso, la imagen se repite tanto horizontal como verticalmente, tanto en la dirección x como en la dirección y, respectivamente, hasta que llena el espacio.

section {
    background-repeat: no-repeat;
        }

El valor no-repeat evita que la imagen se repita desde todas las direcciones. La imagen solo se muestra una vez.

section {
    background-repeat: repeat-y;
        }

Este valor repite la imagen solo horizontalmente en la página. La imagen se repite a lo largo de la página, en la dirección x. La dirección x en matemáticas es de izquierda a derecha.

section {
    background-repeat: repeat-y;
        }

Este valor repite la imagen solo verticalmente en la página. La imagen se repite hacia abajo en la página, en la dirección y. La dirección y en matemáticas es de arriba hacia abajo.

Cómo establecer la posición del fondo

Después de agregar una imagen de fondo y evitar que se repita, podemos controlar aún más cómo se ve dentro del fondo de la etiqueta al mejorar tu posición.

Usaremos la propiedad background-position para hacer esto.

El selector toma dos valores. El primero es para la posición horizontal o dirección x (cuán lejos de la etiqueta). El segundo es para la posición vertical, o dirección y (hasta dónde baja la etiqueta).

Los valores pueden ser unidades, como un par de píxeles:

section {
    background-position: 20px 30px;
        }

Esto moverá la imagen 20px a lo ancho y 30px hacia abajo en la etiqueta contenedora.

En lugar de píxeles, podemos usar un conjunto de palabras clave como derecha, izquierda, arriba, abajo o centro para colocar la imagen a la derecha, izquierda, arriba, abajo o en el centro de la etiqueta.

section {
    background-position: right center;
        }

Esto coloca la imagen en el lado derecho del centro de la etiqueta.

Si quisiéramos centrarlo tanto en horizontal como en vertical, haríamos lo siguiente:

section {
    background-position: center center;
        }

Para posicionar una imagen con mayor detalle, cabe mencionar que podemos utilizar porcentajes.

section {
    background-position: 20% 40%;
        }

Esto coloca la imagen un 20% a través de la etiqueta y un 40% hacia abajo.

Hasta ahora hemos visto valores usados en combinación, pero también podemos especificar un valor como background-position: 20px; o background-position:center; o background-position: 20%;, que lo aplica en ambas direcciones.

Cómo cambiar el tamaño de una imagen de fondo

Para controlar el tamaño de la imagen de fondo podemos usar la propiedad background-size.

Nuevamente, al igual que las propiedades anteriores mencionadas, toma dos valores. Uno para el tamaño horizontal (x) y otro para el tamaño vertical (y).

Podemos usar píxeles, así:

section {
    background-size: 20px 40px;
    /* dimensiona la imagen 20px de ancho y 40px de altura */
        }

Si no sabemos el ancho exacto del contenedor en el que estamos almacenando la imagen, hay un conjunto de valores específicos que podemos dar a la propiedad.

• background-size: cover; cambia el tamaño de la imagen de fondo para que cubra todo el espacio de fondo de la etiqueta sin importar el ancho de la etiqueta. Si la imagen es demasiado grande y tiene una relación mayor con respecto a la etiqueta en la que se encuentra, esto significa que la imagen se estirará y, por lo tanto, se recortará en sus bordes.
• background-size: contain; contiene la imagen, como sugiere el nombre. Se asegurará de que toda la imagen se muestre en el fondo sin recortar nada. Si la imagen es mucho más pequeña que la etiqueta, quedará un espacio vacío que hará que se repita para llenarlo, por lo que podemos usar background-repeat: no-repeat; regla que mencionamos anteriormente.

La regla background-size:cover; en este caso se recortarán partes de la imagen.

Cuando lo cambiamos a background-size:contain; vemos que la imagen se encoge para ajustarse a la etiqueta section.

Cómo utilizar la propiedad Background Attachment

Con la propiedad background-attachment podemos controlar dónde se adjunta la imagen de fondo, es decir, si la imagen está fija o no en el navegador.

El valor predeterminado es background-attachment: scroll;, donde la imagen de fondo permanece con su etiqueta y sigue el flujo natural de la página desplazándose hacia arriba y hacia abajo a medida que nos desplazamos hacia arriba y hacia abajo.

El segundo valor que puede tener la propiedad es background-attachment: fixed;. Esto hace que la imagen de fondo permanezca en la misma posición, fijada a la página y fijada en la ventana gráfica del navegador. Esto crea un efecto de paralaje del que puedes ver un ejemplo aquí:

Degradados de fondo

Un caso de uso diferente para la propiedad background-image es decirle al navegador que cree un degradado.

El background-image en este caso no tiene una URL, sino un lineal-gradient.

La forma más sencilla de hacer esto es especificar el ángulo. Esto controla la dirección del degradado y cómo se combinarán los colores. Por último, agregue dos colores que desee combinar en un degradado para el fondo de la etiqueta.

Un degradado que va de arriba a abajo y de negro a blanco es:

section {
    background-image: linear-gradient(black,white);
        }

Los grados más comunes utilizados para los gradientes son:

• 0 grados de arriba a abajo
• 90 grados de izquierda a derecha
• 180 grados de abajo hacia arriba
• 270 grados de derecha a izquierda

Cada uno de los grados anteriores se corresponde con la parte superior, la derecha, la parte inferior y la izquierda, respectivamente.

section{
  background-image: linear-gradient(to left,pink,orange);
        }

En lugar de colores de palabras clave, podemos usar colores hexadecimales para ser más específicos y tener una gama más amplia de opciones:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
      }

También podemos incluir más de dos colores en un degradado, creando diferentes efectos y esquemas de color.

Conclusión

Esto marca el final de nuestra introducción a la sintaxis básica de la propiedad background-image.

A partir de aquí, las posibilidades son infinitas y dejan espacio para mucha expresión creativa. Estos efectos ayudan a que el usuario tenga una experiencia agradable al visitar su sitio web.

Espero que esto haya sido útil, y gracias por leer..

¡Diviértete con tus diseños y feliz codificación!