How to display a title on Bulma carousel?

Question

I'm actually learning Bulma and trying to get over this Bulma-carousel problem:

Carousel works well but I want to add a title on each displayed images.

I tried many things such as put image as background of carousel-item but image does not fit the full height of carousel and so on...

Here is my actual code:

<section class="hero is-large has-carousel">
    <div class="hero-head"></div>
    <div class="hero-body">
        <div class="hero-carousel" data-autoplay="true" data-navigation-keys="false" data-autoplay-speed="5000" data-effect="fade" data-duration="1000">
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background" src="{{ 'assets/images/slider_1.jpg'|theme }}">
                <h2 class="title">C'est beau le Mourillon!</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_2.jpg'|theme }}">
                <h2 class="title">Oh le téléphérique :o</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_3.jpg'|theme }}">
                <h2 class="title">Devinez qui je suis?</h2>
            </div>
        </div>
    </div>
    <div class="hero-foot"></div>
</section>

The problem is the title is displayed after the image, so it's out of the section element and not displayed!

I can't make it centered inside of the image!

Answer 1

I finally found the solution (after 3 hours) in the git plugin issues:

<div class="carousel-item has-background"> // has-background
    <img class="is-background" src="images/slider_1.jpg"> // is-background
    <div class="hero-body has-text-centered is-overlay"> //hero-body is-overlay
        <h2 class="title">C'est beau le mourillon!</h2>
        <h3 class="subtile">Surtout le 15 août...</h3>
    </div>
</div>