Как сделать так, чтобы карты всегда находились внутри фонового изображения?

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

Вот мой код содержания

{% block content %}
    <style>
        .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%;
        }
    </style>

    <div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
        <div class="custom-skills-section">
            <h2 class="text-center text-white py-4">My Skills</h2>
            <div class="container">
                <div class="row">
                    {% for skill in skills %}
                        <div class="col-lg-4 col-md-6 col-12 mb-4 custom-skill-card">
                            <div class="custom-skill-card-shadow">
                                <div class="custom-skill-card-content">
                                    <h4 class="custom-skill-title">{{ skill.name }}</h4>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

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

Посмотрите, как это выглядит на этом изображении: enter image description here

Вы можете попробовать этот стиль CSS: 

.container{
  max-width: 95% // so that it will be never in outside the box and make 
                 sure it is less than 100%
}
.custom-skills-section {
 //your existing
 background-size: cover; 
}

Примечание: Для карты используйте сетчатый дисплей

Что-то вроде этого должно вам помочь. Поиграйте со значениями css, чтобы получить именно то, что вы ожидаете.

<style>
.custom-skills-section {
    background: url('{{ background_image }}');
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:5%;
    overflow:scroll;
}

.custom-skills-section h2 {
    width:100%;
    text-align:center;
    color:white;
}

.custom-skill-card {
    width:33%;
}

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

.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%;
}
.row {
    display:flex;
    flex-wrap:wrap;
}
</style>

<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
    <div class="custom-skills-section">
        <div class="container">
            <h2>My Skills</h2>
            <div class="row">
            {% for skill in skills %}
                <div class="custom-skill-card">
                    <div class="custom-skill-card-shadow">
                        <div class="custom-skill-card-content">
                            <h4 class="custom-skill-title">{{ skill }}</h4>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
Вернуться на верх