Jump to content
derelektrischemoench

Set an image as background for a div with text

Recommended Posts

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

Share this post


Link to post
Share on other sites
<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>
  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...