Any way to keep the cards always inside the background image?

I want the cards to remain inside of the background image no matter of the screen size, and it’s not working with me.

Here’s my content code

{% 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 %}

Hello,
I’m my idea is to put the cards inside the note board to appear like old school. but the cards always get out from the note board. on smaller screens they get out from up and down of the background image.

See how it looks on this image:

You need to sign in to view this answers

Related Post