[SOLVED] CSS Background image from Gallery Module
Posted: Tue Jan 15, 2013 8:09 pm
In case anyone is searching for a solution for displaying images from the Gallery Module which have been styled as background images using CSS.
Problem:
I needed to show a static image banner at the top of a web page with a large <h1> text heading on top of the banner. The background image changes randomly on each page refresh. I couldn't get the heading to sit on top of the background image (tried css styling's z-index without success).
Solution:
Create a new Gallery template.
Gallery template:
In the Gallery template settings, change the thumbnail size to suit your needs, e.g. 1600px wide x 200px high. Enter 1 in the 'Maximum number of items per page' field. Leave the 'Template JavaScript' field empty. You can style your image div in the 'Template CSS-stylesheet' field if you wish or empty this field and add the styling in your website's cms stylesheet.
Page template:
Hope this helps someone and thanks Jos for your assistance!
Problem:
I needed to show a static image banner at the top of a web page with a large <h1> text heading on top of the banner. The background image changes randomly on each page refresh. I couldn't get the heading to sit on top of the background image (tried css styling's z-index without success).
Solution:
Create a new Gallery template.
Gallery template:
Code: Select all
{foreach from=$images item=image}
{if !$image->isdir}
<div class="some-class" style="background:url('{$image->thumb}') no-repeat top center;">
<h1>{menu_text}</h1>
</div>
{/if}
{/foreach}Page template:
Code: Select all
{Gallery dir='galleryname' number="1" action="showrandom"}