Есть ли способ сохранить карты всегда внутри фонового изображения? ⇐ CSS

[Anonymous]

Я хочу, чтобы карточки оставались внутри фонового изображения независимо от размера экрана, и у меня это не работает.
Вот мой код контента

Код: Выделить всё

{% block content %}

.custom-skills-section {
background: url('{{ background_image }}') center center / contain no-repeat;
border-radius: 10px;
padding: 20px;
margin: 0 auto;
width: 100%;
max-width: 1600px;
height: 1200px;
}

.custom-skill-card-shadow {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}

.custom-skill-card-content {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #f0f4f8;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.custom-skill-title {
font-size: 1em;
font-weight: 600;
color: #333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}



My Skills


{% for skill in skills %}



[h4]{{ skill.name }}[/h4]



{% endfor %}




{% endblock content %}

Здравствуйте!
Я хочу поместить карточки на доску для заметок, чтобы они выглядели как в старой школе. но карточки всегда выпадают из доски для заметок. на экранах меньшего размера они выходят сверху и снизу фонового изображения.
Посмотрите, как это выглядит на этом изображении:



Подробнее здесь: https://stackoverflow.com/questions/791 ... ound-image