Estilos CSS para Imágenes de Fondo y Texto en HTML

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 –black.

.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:

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).