How to display background over the image in colorbox ?

You can style colorbox iframe by adding css code to #cboxTopLeft #cboxTopCenter #cboxTopRight etc. divs. U can style it however you want (even background over image by setting optional z-index). But I'm not able to set background over image when working with those colorbox thumbs... If somebody know the way, please post it here (BTW this youtube movie is very nice - I have spend two hours before trying to install insert additional to colorbox to display thumbs in editor, it's a pity I didn't found it earlier:)

@batigol @digidog no problem. You can set colorbox iframe over the image by adding z-index value to #cboxBottomCenter, #cboxBottomRight etc. like I said before.

Making thumbs as a background images is a little bit more tricky. You need to add Content: Link (and Content: (Your-Gallery-Image) off course) to your views and in Content: Link Rewrite results - Rewrite the output of this field add something like this:

[field_gallery_image](you gallery field image) and check Output this field as a link - Link class and add there (your-class-name2)

in your css file:

.view-id-(your-view-name) .views-field-view-node .field-content a.your-class-name2
{position:relative;}

.view-id-(your-view-name) .views-field-view-node .field-content a.your-class-name2 .your-class-name1
{position:absolute;
width:Xpx;
height:Xpx;
background:url('../your-bg-image.png')center no-repeat;
margin:-Xpx;}

Now you can see that all of your thumb images are set as a background of your-bg-image.png ! I hope it helps, if something is unclear let me know.

off course u can use colorbox-insert-image.tpl.php to achive something similar:

EDIT: added some example code you can modiffy:

<span class="class-node-bg-img">
<a href="<?php print $link_path; ?>" title="__title__" class="colorbox colorbox-insert-image" rel="<?php print $gallery_id; ?>">
<span></span>
<img typeof="foaf:Image" src="<?php print $image_path; ?>" alt="__alt__" title="__title__" class="<?php print $class; ?>" />
</a>
</span>

.class-node-bg-img
{padding:Xpx;}

.class-node-bg-img a
{position:relative;
width:Xpx;
height:Xpx;}

.class-node-bg-img a span /* only SPAN is working here... ! */
{position:absolute;
background:url('../images/your-bg-image.png')center no-repeat;
width:Xpx;
height:Xpx;
margin:-Xpx;}

but in this scenario class-node-bg-img won't be close after you add image, it will close after you add all your images. Span class is fixing it.

http://diablo3.progames.pro - gallery
http://progames.pro/gallery/might-magic-heroes-6 - example

BTW I have eddit the code (change few div to spans) and after fixing some FileField Path problems, IMCE and it's http://drupal.org/node/1099994 is a problem now.