Profile Card Component - HTML/CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hola @Rysth👋, ¡buen trabajo al completar este desafío! 🎉

  Puede usar las propiedades de "background" de CSS para establecer los 2 circulos en el fondo en lugar de la etiqueta <img>:

  body {
      . . .
      background-color: var(--primary-dark-cyan);
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  }
  

  • background-color Establece el color del fondo
  • background-image Establece la imagen del fondo
  • background-repeat Establece si una imagen de fondo se repetirá a lo largo de los ejes horizontal y vertical, o no se repetirá en absoluto.
  • background-position Establece la posición inicial de una imagen de fondo. More information
  • También puede especificar el tamaño de la imagen de fondo con "background-size"

  La propiedad background es una abreviatura de todas las propiedades mencionadas anteriormente, pero por ahora. Es mejor entenderlos por separado.

  La background-position para mí funcionó con las unidades vw (ancho de la ventana gráfica "viewport width") y vh (altura de la ventana gráfica "viewport height"), pero también puede usar porcentajes. Es solo cuestión de prueba y error colocarlos como desee.

  Referencias en ingles:

  • CSS background Property |
  • Background property
  • Background-repeat (MDN)

  Espero que esos consejos le ayuden.

  ¡Buen Trabajo!

  20

  Marked as helpful