Set an image as background for a div with text

[derelektrischemoench]

Hi guys,

I've got  a little problem here which I can't completely get my head wrapped around. So I've got a site which has links to several picture galleries and I want to set one image as a thumbnail to enter the gallery, which so far, isn't that big of a problem. 

Then, I'd like to place a caption for the gallery inside that div on top of the image to make it animatable. Now my first approach would have been to use the css "background-image" property for the background and then use regular markup for the captions and animate these. But unfortunately I can't use the api with css. I've tried inline styles but that didn't work, then the image covered the caption. Basically I'm looking for something like this:

<div class="thumbnail">
<a href="...">  (Link to my gallery)
     <div class="flex-item6" style="background-image:
     (<?php echo $image=$page->images->get ("chrysanthemum_thumbnail.png")->url; ?>)">
<span class="overlay">stuff</span>
</a>
</div>

I just sketched this up, I'm on the road and can't access my original code, but I hope you get the idea.

When I tried this earlier, either the markup wasn't displayed or it showed under the image when I used position:relative in my css.

So where did I mess up probably somwhere with all the brackets and stuff when calling the api...? And is there  a solution to this without using inline-style?

/edit: I tried implementing it via css, which worked but that ultimately means that I would have to store my thumbnails separately in some folder and can't access the via the backend

Thx

Greetz

derelektrischemoench

[gebeer]

<div class="thumbnail">
<a href="...">  (Link to my gallery)
     <div class="flex-item6" style="background-image:
     (<?php echo $image=$page->images->get ("chrysanthemum_thumbnail.png")->url; ?>)">
<span class="overlay">stuff</span>
</a>
</div>

In your inline style you are missing the url() part. And the api call to the image is also not correct. Is the image field storing only 1 ore multiple images?

If it is multiple, you need to do something like

<div class="thumbnail">
<a href="...">  (Link to my gallery)
     <div class="flex-item6" style="background-image:
     url(<?php echo $page->images->first()->url; ?>)">
<span class="overlay">stuff</span>
</a>
</div>

[derelektrischemoench]

Thx for the quick reply, that worked perfectly!

[Christophe]

Did you try to use z-index?