Block with image and text using Bulma CSS - css

Question

I try to make this block image with text using Bulma CSS. I've tried a lot of things (relative, z-index, etc.) and I didn't succeed making something great for desktop or mobile. Every time, the text is overflowed or get outside the box. I can't set title character limit, so I try also to have a word-break at a second line if possible.
Here is a sample of what I'm looking for :
Here is my HTML :
<div class="block_article" data-overlay>
<img src="/static/img/{{ article.image }}" alt="" />
<span>{{ article.name }}</span>
</div>
And my current CSS (not working) :
.block_article {
position: relative;
width: 500px;
height: 250px;
}
.block_article span {
position: absolute;
top: 50px;
left: 5%;
width: 100%;
color: white;
text-shadow: 2px 2px black;
font-size: 1.3em;
}
Result :
Is there some tips for that kind of thing, or a Bulma extension for this ?
Thanks for your help !

Answer 1

When using Bulma, have a look at the .hero element: https://bulma.io/documentation/layout/hero/. This might be what you are looking for. As Viira mentioned, you could add your image to the background (using background-image).
Also, learning how to center things (https://www.w3.org/Style/Examples/007/center.en.html) might be useful to you.

Answer 2

Here's my final HTML and CSS for people who are in the same case. It's probably not perfect, but this is a good start...
<div class="hero block_article" style="background-image: url('/static/img/{{ article.image }}');">
<span>{{ article.name }}</span>
</div>
.block_article {
width: 500px;
height: 250px;
background-size: cover;
line-height: 230px;
text-align: center;
border-radius: 10px;
}
.block_article span {
color: white;
text-shadow: 2px 2px black;
font-size: 1.3em;
}
Result :