/* The container must be 'relative' to position children inside it */
.banner-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* Or any size you want */
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden; /* Keeps everything tidy */
}

/* Your image styling */
.banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* * This is the magic for the particles:
 * - 'absolute' positions it over the 'relative' parent.
 * - 'top', 'left', 'width', 'height' make it cover the parent exactly.
 * - 'z-index' puts it on top of the image.
*/
#my-particles-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* For interactive effects like 'bubble' on hover, ensure pointer-events is NOT set to 'none'. */
    /* If you need to click through the overlay, consider adjusting z-index of underlying elements or using event delegation. */
}