Hola @valeriamadrid, lo que comentas es muy común con el tema Classic y las imágenes de categoría. El enfoque de @rubendigital y @raul_store es acertado. El problema principal es que tu degradado va de oscuro (abajo) a transparente (arriba). Si tu texto está en la parte superior del banner, podría seguir siendo difícil de leer. Además, la interacción de position: relative y z-index con las imágenes de fondo a veces puede ser tricky.
Para asegurar una mejor legibilidad, podríamos invertir el degradado o hacerlo más uniforme y asegurarnos de que el texto siempre tenga un contraste adecuado. También es importante que la imagen de fondo se comporte bien responsivamente.
Aquí te propongo una modificación a tu CSS que deberías añadir a themes/classic/assets/css/custom.css:
.category-cover {
position: relative;
overflow: hidden; /* Asegura que la imagen no sobresalga */
}
.category-cover .category-header {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end; /* Alinea el contenido al final (parte inferior) */
height: 100%; /* Ocupa toda la altura del contenedor */
He cambiado el ::after por un ::before y el degradado para que vaya de transparente (arriba) a oscuro (abajo), lo cual suele funcionar mejor si el texto está centrado o más hacia abajo. También he añadido display: flex y justify-content: flex-end al .category-header para que el texto se alinee en la parte inferior del banner, donde el degradado es más oscuro. overflow: hidden en .category-cover es para controlar el recorte, y text-shadow añade un extra de contraste para el texto. Recuerda que con PrestaShop 1.7.8.4, este tipo de modificaciones CSS en custom.css es la forma más limpia de hacerlo sin tocar el código del tema principal.