Expected behavior Good morning,

With MDB 5 Pro and the "full-image-cover-carousel" template, how to modify the loading of images with "srcset", while keeping the text in the foreground in the middle of the image.

Image sizes are 2100x1312; 1200x750, 780x520, and 320x200 so that each device loads the image corresponding to the device (pc, tablet, smartphone). The size

I have tried several codes offered on the web, but I cannot find the solution. What solution could you suggest to me for the "full-image carousel".

Thank you and wish you a great day.

Alan Actual behavior

Resources (screenshots, code snippets etc.) *Oiginal code*: .carousel-item:first-child, .carousel-item:nth-child(2), .carousel-item:nth-child(3) { background-repeat: no-repeat; background-size: cover; background-position: center center; }

introCarousel,

.carousel-inner, .carousel-item, .carousel-item.active { height: 100vh; } .carousel-item:first-child { background-image: url("../img/carousel/lac-du-bourget-chambotte.jpg"); } .carousel-item:nth-child(2) { background-image: url("../img/carousel/courchevel-chalet-paysage.jpg"); } .carousel-item:nth-child(3) { background-image: url("../img/carousel/chateau-miolans-jardin.jpg"); } @media (min-width: 992px) { #introCarousel { margin-top: -58.59px; } } .navbar .nav-link { color: #fff !important; }

Exemple: .#introCarousel{ background-color:#C30; background-image:url("../img/carousel/lac-du-bourget-chambotte-780.jpg"); background-image:-wekit-image-set( url("../img/carousel/lac-du-bourget-chambotte-2100.jpg") 1x, url("../img/carousel/lac-du-bourget-chambotte-1200.jpg") 2x); background-image: image-set( url("../img/carousel/courchevel-chalet-paysage-1200.jpg") 1x, url("../img/carousel/courchevel-chalet-paysage-2100.jpg") 2x,); background-image: image-set( url("../img/carousel/chateau-miolans-jardin-1200.jpg") 750w, url("../img/carousel/chateau-miolans-jardin-2100.jpg") 2100w); }

@media (min-width:992px){#introCarousel{margin-top:-58.59px}}

.navbar

.nav-link{color:#fff!important}

 </style>