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.
Excelente aporte, Muchas Gracias!
Es mejor practica el acortar líneas de código por ejemplo en este caso en lo que compartes?
Claro que impresiona mas un código así, pero en mi caso que voy comenzando me cuesta saber como hacer estas líneas mas cortas D:
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.
En primera gracias por decirme que es background-size:cover la verdad no entendí en la clase su funcionalidad. y agradezco que compartieras el segundo dato.
Aunque me causa duda por que un .svg pierde calidad por esto. Ya que nos habían comentado que no perdían calidad.
Saludos!
Va quedando excelente :D
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
Estoy utilizando la opción que te da GitHub de GitHub Pages te dejo ahí el link para que le eches un ojo
O también esta Clase del curso Profesional de Git y GitHub.
Un saludo ^^
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
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.
++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.
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!
La imagen en el HTML es un elemento que tiene importancia sobre el contenido, y no puedes incluir elementos sobre él (de manera sencilla) y tiene un texto alterno ("alt") por si no carga la imagen.
La imagen en el background no es un elemento, es una imagen de fondo para el elemento que estás estilizando, la importancia la tiene el elemento, mas no el fondo, y si no carga la imagen no hay fondo para el elemento en cuestión.
¿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.
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
Hey Joel, no creo que sean buenas ni malas practicas, pienso que lo mas importante es hacerlo entendible, la propiedad background puede recibir muchos parámetros que al juntarlos pueden dar una linea bastante larga, por lo que considero que lo mejor es, si no es tan largo y se entiende fácil estaría bueno ponerlo todo en una, pero si es una linea muy larga pienso que lo mejor es separarla por sus propiedades.
y para entender como acortarlas puedes chequear la documentación para ver todos los parámetros que se pueden pasar. lo mejor para ver todas las posibilidades considero que es leyendo código y donde se vean líneas así ir a ver la documentación, si me equivoque en algo porfa me comentan !!
