Imagen de background

El shorthand de la imagen de background sería:

background: url('./assets/images/bitcoin.svg') center/cover no-repeat;

Tener en cuenta que se debe separar el background-position y el background-size por un slash (/) usando esta forma.

Hola , quiero aportar algo sobre el background-size: cover.
Este se usa para expandir la imagen respecto a la dimensión del contenedor que en este caso seria el mismo div.
Y es verdad que es una buena practica cuando las imágenes que agregamos son de un tamaño superior predefinido.
Pero noto que cuando lo agregamos a este ejemplo , la imagen pierde calidad, siendo incluso svg. Y Creo que se genera por el mismo cover ,ya que eso sucede con imágenes pequeñas, y en este caso lo toma así debido a que el tamaño de la imagen es de 195px.

Lo que finalmente quiero decir es que,** si sabemos que la imagen es pequeña**, no seria bueno agregar el background-size: cover.
Espero les ayude, y si me equivoque en algo por favor corregirme, gracias.

Va quedando excelente 😄
Muchas Gracias por tremendo aprendizaje que nos están compartiendo!!!
Aquí el Repositorio de GitHub por si quieren checar el código.
Aquí puedes verla Online

Para tomarlo un poco como desafío, siempre trato de maquetar la sección, antes de que Diego nos empiece a enseñar como, de pronto les de ideas.😁

Honestamente no quiero hacer un copy paste como muchos acá porque pues obvio la pagina va a salir igual y esa no es la idea, pero intento aplicar conocimientos de los cursos pasados y veo que se dificulta demasiado la labor. Por ejemplo intenté hacer lo de la clase de imágenes responsive cargando con small,medium y large y fue un total fiasco 😥. Se hace frustrante pero prefiero así porque hay cosas que no quiero aplicar directo de la clase porque no me sirven para mi idea de pagina, a meterle animo a esta vaina

Hablando de imágenes, les dejo un artículo que compara el uso de los formatos .jpg vs webp.

Link: JPG to WebP - Comparing Compression Sizes

Hola, estuve viendo un post de Stack Overflow en donde se discutia cuando usar

<img>

V.S

background-image: url('');

Y el factor que mas resono en mi fue: “Si la imagen es unicamente usada para diseño o no tiene relación directa con el contenido usa background-image, pero si tiene alguna funcionalidad, tiene mayor importancia (foto de perfil, thumbnails), la puedes clicar, tiene relacion directa con el contenido o algun tipo de importancia semantica para la página usa <img>.”
.

En resumen… para imagenes meramente decorativas usa background-image, y para imagenes con una mayor relavancia o grado de funcionalidad usa <img>

Cuando ocupamos imágenes de background también hay buenas practicas porque en ocasiones la imagen no esta del tamaño que nosotros necesitamos, puede estar una imagen de 200px o mas grande así que vamos a asegurar que la imagen siempre se quede en el centro, que no se repita y que si empieza a crecer la imagen, empiece a crecer y nosotros tengamos visibilidad del centro de la imagen, no se empiece como a deformar

background-size: cover;
background-position: center; 
background-repeat: no-repeat; 

es mejor mostrar las imagenes como background en los div’s o usar la etiqueta img?

Por que no utiliza <figure >?

En vez de combinar las propiedades de background-position: center o este calc(50% - 128px), entre otros … para centrar los contenedores…es mejor ser uniforme en toda la página y solo emplear flexbox en todo el contenido, por ende, sus propiedades de alineamiento respectivo.

Una pequeña observación al colocar el margen como lo puso Diego en el backgrounImg

No era necesario poner una declaración de margin y luego una declaración de margin-bottom, la misma propiedad de margin pudo haber bastado para ambas escribiéndolo de la siguiente manera:

margin: 0 auto 50px auto;

Un cambio minísculo, pero básicamente se puede usar la propiedad de margin de esa manera y eso especifica el margen en el orden de arriba, derecha, abajo e izquierda.

Propiedad background-size

contain
Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.

cover
Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.

Tomado de: https://developer.mozilla.org/es/docs/Web/CSS/background-size

Dios, me molesto con cada video con el profesor ¿Por qué no sigue los tamaños que el diseño estipula? ¿O es que el diseño en Figma fue modificado luego de que grabara estas clases? Porque de verdad, en cada clase cambia algo, ahora fue el line-height en la etiqueta “p”, en vez de poner 1.8rem pone 1.6rem ¡Si el diseño dice 16px!

¿CUANDO USAR ETIQUETA HTML img vs PROPIEDAD CSS background-image?

• Usa img si buscas que la gente imprima tu página y quieres que la imagen se incluya por defecto.
• Usa img (con texto alt) cuando la imagen tenga un significado semántico importante, como un icono de advertencia. Esto garantiza que el significado de la imagen pueda ser comunicado a todos los usuarios, incluidos los lectores de pantalla.

• Usa CSS background-image si la imagen no es parte del contenido.
• Usa background-image CSS cuando se hace un reemplazo de imagen de texto, por ejemplo, párrafos/encabezados.
• Usa background-image si quieres que la gente imprima tu página y no quieres que la imagen se incluya por defecto.
• Usa background-image si necesitas mejorar los tiempos de descarga, como con los sprites CSS.
• Usa background-image si necesitas que sólo una parte de la imagen sea visible, como con los sprites CSS.

(https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image/492834#492834):

Propiedades de las imagenes en HTML y buenas practicas

/* propiedades de las imagenes, buenas practicas */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

ese gris #757575 si se repite en la segunda sección de precios, tanto en el párrafo como en el texto debajo del precio, estaría bueno también incluirla en una variable

Aquí hay buena documentación del background-size

No se si les pasó el cuestionarse cuando usar <img> y background-image… por lo que acá dejo más info

Solo debo decir que me encanta el curso y realmente me parece súper productivo para comenzar mis propios proyectos personales.

Tengo una duda: por que no se utiliza la etiqueta <img> en lugar de modificar el background del div?

El shorthand de la imagen de background sería:

background: url('./assets/images/bitcoin.svg') center/cover no-repeat;

Tener en cuenta que se debe separar el background-position y el background-size por un slash (/) usando esta forma.

La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.

Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas.

La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.

En la clase el profesor utiliza

.main-exchange-container

Para la especificación de estilos del h2 y el párrafo pero entiendo que sería mejor, para ser más específicos, utilizar:

.main-exchange-container--title

Pequeño detalle en la siguiente sección de la hoja de estilos utiliza:

line-height: 1.6rem;
y en Figma sugiere 18px= 1.8rem
No varía mucho pero vale la pena acotarlo.

.main-exchange-container--title p {
    margin-bottom: 30px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: #757575; 
}```

		
	width: 200px;
    /*Le da una dimension a mi imagen*/
    margin: 0 auto;
    /*Centar Img*/
    background-repeat: no-repeat;
    /*Asegura que no se repita la imagen*/
    background-position: center center;
    /*asegura que se centre el fondo*/
    background-size: cover;
    /*toma todo el tamaño disponible de su contenedor*/```

❗❗ IMPORTANTE ❗❗

Recomiendo utilizar el siguiente selector con el 🎯 de ser más específicos:

• Minuto 3:58 del video: (para acceder al título “Visibilizamos todas las tasas de cambio”)

.main-exchange-container--title h2{
}

• Minuto 4:56 del video: (para acceder al párrafo)

.main-exchange-container--title p{
}

amigo si no le lee el backgroud puede ser porque tienen que poner dos puntos ejemplo: url (. . / img);

Está quedando elegante, pero averiguaré cuando usar background-image y cuando usar <img>

background-position : —nos permite decir en que parte de la pantalla poner la imagen
background-size : cover— la imagen se estira hasta cubrir toda la caja o contenedor
background-repeat : si la imagen de fondo es más pequeña que el sitio disponible, el
navegador repite la imagen en todas las direcciones hasta cubrir completamente el contenedor

si quieren saber que colores tiene una imagen! saludos
https://pinetools.com/es/obtener-colores-imagen

Muy buenos aportes interesantes con el tema de posicionamiento de la imagen, no tenia idea pero he aprendido muchas mas cosas.

<codbackground-image: url("../../media/examples/lizard.png");

    Copy to Clipboard




background-image: url("../../media/examples/lizard.png"),
                  url("../../media/examples/star.png");

    Copy to Clipboard




background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

    Copy to Clipboard




e> 

Para todas aquellas personas que deseen la imagen de Bitcoin.svg en linea y no en local por si lo van a subir a Github por ejemplo aqui se las dejo… Es muchisimo mas facil.

https://cdn.pixabay.com/photo/2021/05/02/14/24/14-24-28-593_960_720.png

Vamos bastante bien!
Le quite un poco al padding del main-exchange-container ya que me pareció un poco mucho.
Aquí mi repo: https://github.com/JairoPozo/Proyecto_Bit

Me quedo así:

.main-exchange-container .backgroundImg {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-bottom:  50px;
  /* background: url('./assets/img/bitcoin.svg') center/cover no-repeat;*/
  background-image: url('./assets/img/bitcoin.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-exchange-container h2 {
  margin-bottom: 30px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--black);
}

.main-exchange-container p{
  margin-bottom: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6rem;
  color: #757575;
}

consulta se pondria poner un figure y agregar la imagen de css?

Creo que el width mínimo cambio con la llegada de celulares 21:9 como el Galaxy Fold o los Motorola One, pienso que no esta de más optimizar para ellos. 😅️

¿ Cual es la diferencia entre pixeles y rem ?

main {
    width: 100%;
    height: auto;
    background-color: var(--off-white);

    & .exchange {
        width: 100%;
        height: auto;

        & .__backgr-img {
            width: clamp(250px, 80%, 500px);
            aspect-ratio: 1 / 1;
            margin-inline: auto;

            & img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
        }

        & .__title-exchange {
            container-type: inline-size;
            width: 90%;
            width: clamp(250px, 100%, 800px);

            margin-inline: auto;


            & :is(h2, p) {
                text-align: center;
                align-content: center;
            }

            & h2 {
                font-size: 7cqw;
                padding: 5cqw;
            }

            & p {
                font-size: 4cqw;
                padding: 3cqw;
            }
        }
    }
}

.

Algo que ya sabemos pero que pasa seguido es chequear de escribir bien los nombres de las clases o de las propiedades. Me paso de escribir mal en 2 lados y por eso no se aplicaba bien el estilo.

En esta clase nos mencionan cuales se consideran buenas practicas al momento de colocar una imagen de background.

Cuando vamos a utilizar un color por unica vez o por segunda vez, no tiene caso utilizar variables. Los colores se guardan en variables para generar consistencia en el sistema.

Vamos bastante rapido como dice el profesor Diego.

Si subes las imágenes en el archivo CSS en lugar de en el archivo HTML, puede haber algunas consecuencias que afecten la eficiencia y la apariencia de tu página web.

Una de las principales consecuencias es que las imágenes pueden tardar más en cargar. Esto se debe a que, para cargar una página web, el navegador primero debe descargar el archivo HTML y luego descargar todos los archivos CSS y JS que se refieren en él. Si las imágenes están incluidas en el archivo CSS, esto significa que el navegador debe descargar el archivo CSS completo antes de poder mostrar las imágenes. Esto puede ralentizar la carga de la página y afectar la experiencia del usuario.

Otra consecuencia es que, si necesitas modificar la ubicación o el nombre de una imagen, tendrás que hacerlo en el archivo CSS en lugar de en el HTML. Esto puede ser inconveniente si tienes muchas imágenes y si el archivo CSS es muy grande, ya que tendrás que buscar y modificar la imagen en el archivo CSS en lugar de en el HTML.

En general, es mejor subir las imágenes al archivo HTML ya que esto permite cargar las imágenes de forma más eficiente y asegurar que se muestren correctamente en la página. Sin embargo, si tienes una razón específica para querer incluir las imágenes en el archivo CSS, asegúrate de tener en cuenta estas consecuencias y toma una decisión informada.

Creo que hay que hacer una correcion:
1rem = 16px
Según Freecodecamp

📢📢 AVISO IMPORTANTE ❗❗

• Mira el siguiente tutorial para acceder al resumen visual de la clase 📘

creo que la variable era var(–gray);

Apoyando el HTML Semantico, sustitui el div por una etiqueta figure para la imagen de la primera seccion

<figure class="backgroundImg">
	<img src="" alt="">
</figure>

En el caso de la accesibilidad, el atributo ALT no se puede agregar desde CSS. Sin embargo estuve leyendo un poco y encontre que cuando la imagen no aporta un contenido especifico de valor y es netamente decorativa, no es necesaria.

CSS de esta clase ❤️

.main-exchange-container .backgroundImg{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	margin-bottom: 50px;
	background:url(./assets/assets/img/Bitcoin.svg);/*Puede variar tu direccion de la mia ;) */
	background-size: cover;
	background-position: center;
	background-repeat:no-repeat ;
}

.main-exchange-container h2{
	margin-bottom: 30px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 26px;
	color: var(--black);

}

.main-exchange-container p{
	margin-bottom: 30px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 16px;
	color: #757575; 
}

.main-exchange-container .backgroundImg{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 50px;
    background-image: url("../assets/img/bitcoin.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-exchange-container h2{
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}
.main-exchange-container p{
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

Para el margin de la imagen puede aplicar en una sola linea:

margin: 0 auto 50px;

En este caso el primero valor es para el margin-top
el segundo valor para margin-left y margin-right
y el tercero corresponde a margin-bottom

Nunca pensé avanzar tan rápido, imaginé que demoraba mas.

El color especifico del párrafo #757575

Impresionante lo rápido que está tomando sentido el proyecto.

Thanks, Diego. You explain very well! 💪🏻

Gracias, por tu aclarando.

👌