No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
3H
14M
59S

Imagen de background

13/32
Recursos

Ahora es momento de crear varios estilos para la secci贸n de texto, as铆 como de agregar la imagen de fondo que tenemos en nuestros assets. Para ello, continuemos donde nos quedamos en el documento .css del proyecto.

Pasos para agregar imagen de fondo

Una vez est茅s en el proyecto:

  • Llamamos la etiqueta div desde el contenedor principal de la secci贸n.
  • Primero debemos crear el espacio que va a ocupar que exista. De otra manera no lo podremos ver. A帽adimos un ancho y alto de 200px.
  • Centramos el contenido con margin: 0 auto.
  • A帽adimos un margin-bottom: 50px para alejarla un poco del texto.
  • Agregamos la imagen con background-image.
  • background-size: cover permite que la imagen cubra todo el ancho conservando su proporci贸n original, es decir, no crece m谩s del l铆mite.
  • background-position: center para que siempre, sin importar el tama帽o del contenedor, tengamos una vista del centro de la imagen.
  • background-repeat: no-repeat para evitar que se repita en caso que la imagen sea m谩s peque帽a que el contenedor.
.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;
}

Pasos para agregar texto

Dentro del texto tienes dos elementos importantes:

T铆tulo

  • Llamamos la etiqueta h2 desde el contenedor principal de la secci贸n.
  • A帽adimos un margin-bottom: 30px para separarlo del p谩rrafo.
  • Ajustamos su tama帽o a 2.4rem y la hacemos negrita con font-wight: bold.
  • Le damos un interlineado de 2.6rem.
  • Le damos color con la variable 鈥揵lack.
.main-exchange-container h2 {
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}

P谩rrafo

  • Llamamos la etiqueta p desde el contenedor principal de la secci贸n.
  • A帽adimos un margin-bottom: 50px para alejarla del final del contenedor.
  • Ajustamos su tama帽o a 1.4rem y le damos un ancho con font-wight: 500.
  • Le damos un interlineado de 2.6rem.
  • Le damos color gris con color: #757575. En este caso el color no est谩 en una variable porque lo usamos una sola vez en todo el documento .css.
.main-exchange-container p {
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

En el navegador podremos observar esta imagen renderizada:
image.png

S贸lo nos falta la secci贸n de las tablas para terminar la primera secci贸n de nuestro proyecto. 隆Vas a buen ritmo!

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 61

Preguntas 36

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

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?

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>

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.

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

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

驴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):

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 鈥淰isibilizamos 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 : 鈥攏os 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 ?

.

Clase 13: Ahora es momento de crear varios estilos para la secci贸n de texto, as铆 como de agregar la imagen de fondo que tenemos en nuestros assets. Para ello, continuemos donde nos quedamos en el documento .css del proyecto. ## Pasos para agregar imagen de fondo Una vez est茅s en el proyecto: * Llamamos la etiqueta ***div*** desde el contenedor principal de la secci贸n. * Primero debemos crear el espacio que va a ocupar que exista. De otra manera no lo podremos ver. A帽adimos un ancho y alto de ***200px***. * Centramos el contenido con ***margin: 0 auto***. * A帽adimos un ***margin-bottom: 50px*** para alejarla un poco del texto. * Agregamos la imagen con ***background-image***. * ***background-size: cover*** permite que la imagen cubra todo el ancho conservando su proporci贸n original, es decir, no crece m谩s del l铆mite. * ***background-position: center*** para que siempre, sin importar el tama帽o del contenedor, tengamos una vista del centro de la imagen. * ***background-repeat: no-repeat*** para evitar que se repita en caso que la imagen sea m谩s peque帽a que el contenedor. `.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; } ## Pasos para agregar texto Dentro del texto tienes dos elementos importantes: ### T铆tulo * Llamamos la etiqueta ***h2*** desde el contenedor principal de la secci贸n. * A帽adimos un ***margin-bottom: 30px*** para separarlo del p谩rrafo. * Ajustamos su tama帽o a ***2.4rem*** y la hacemos negrita con ***font-wight: bold***. * Le damos un interlineado de ***2.6rem***. * Le damos color con la variable ***鈥揵lack***. `.main-exchange-container h2` { ` margin-bottom: 30px`; ` font-size: 2.4rem`; ` font-weight`: bold; ` line-height: 2.6rem`; ` color: var`(--black); } ### P谩rrafo * Llamamos la etiqueta ***p*** desde el contenedor principal de la secci贸n. * A帽adimos un ***margin-bottom: 50px*** para alejarla del final del contenedor. * Ajustamos su tama帽o a ***1.4rem*** y le damos un ancho con ***font-wight: 500***. * Le damos un interlineado de ***2.6rem***. * Le damos color gris con ***color: #757575***. En este caso el color no est谩 en una variable porque lo usamos una sola vez en todo el documento **.css**. .main-exchange-container p { ` margin-bottom: 30`px; ` font-size: 1.4rem;` ` font-weight: 500`; ` line-height: 1.6rem;` color: #757575; } En el navegador podremos observar esta imagen renderizada: ![image.png](https://static.platzi.com/media/articlases/Images/image%28182%29.png) S贸lo nos falta la secci贸n de las tablas para terminar la primera secci贸n de nuestro proyecto. 隆Vas a buen ritmo!
驴Es mejor pr谩ctica usar backgroundImg o background-img?

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 鉂椻潡

creo que la variable era var(鈥揼ray);

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.

馃憣