A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Imagen de background

13/31
Recursos

Aportes 42

Preguntas 30

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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.馃榿

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

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鈥檚 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鈥s mejor ser uniforme en toda la p谩gina y solo emplear flexbox en todo el contenido, por ende, sus propiedades de alineamiento respectivo.

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 鈥減鈥, en vez de poner 1.8rem pone 1.6rem 隆Si el dise帽o dice 16px!

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

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

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

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

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;

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*/```

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.

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: 鈥淪i 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>

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 ?

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! 馃挭馃徎

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

Gracias, por tu aclarando.

馃憣