Is it possible to add (kind of) a html watermark in galleria fullscreen (Galleria has a theme called Fullscreen)? I am not expecting to "print" the HTML onto the image, like it would be possible to do with GD. I just want to have the HTML above all images, imitating a watermark effect. By the way, I am not worried about the transparency at this moment.

Something like this would do the trick as long as it is always over the images:

```
<div id="logo">
    <a href="/"><img src="logo.png"></a>
    <h2>Slogan.</h2>
</div>

```

This is the css I am using:

```
#logo { position:absolute; left: 20px; top: 40px; z-index: 5; }

```

A working example can be seen here: <http://namourphoto.com>

However, the image disappears after the load of the first images. I guess it is because they are using something in JQuery that makes the images to be load on top of the last top image... So I'd have to "bind" the layer somehow.

Any ideas?

**ACTUAL CODE**

**CSS:**

```
#logo { width: 300px; height: 150px; border: 1px solid red; position: absolute; left: 20px; top: 40px; z-index: -5; }

```

**HTML:**

```
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Fotografia de Casamento: Namour Art Photo Cine</title>
<meta name="description" content="Contamos Sua História com Arte">
<meta name="keywords" content="Fotografia de Casamento">
<meta name="author" content="Rogério Madureira - Atipico.com.br">
<meta name="robots" content="noarchive, noodp, notranslate, noimageindex">

<link rel="icon" href="http://namourphoto.com/namour.ico" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="http://namourphoto.com/style.css" media="all">

<link type="text/css" rel="stylesheet" href="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-656362-77']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
    var referrer=document.referrer;
    var url=$.trim(referrer.substring(7,referrer.length));
    var site=$(location).attr('href');//Pega a uri do site atual
});
</script>
</head>
<body onClick="document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);document.documentElement.mozRequestFullScreen();document.documentElement.requestFullScreen();">

<div id="logo">

    <a href="/"><img src="logo_namour_md.png" title="Estúdio Namour"></a>
    <h2>Contando Sua História com Arte.</h2>
</div>

<div id="content">

<div id="galleria"></div>
<script>
//Galleria.loadTheme('http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
//  debug: true,
//  pauseOnInteraction: true,
    preload: 2,
    showInfo: true,
    idleMode: false,
    imageTimeout: 90000,
//  initialTransition: fadeslide,
    transition: 'fade',
    transitionSpeed: 500,
    autoplay: 5000,
    imageCrop: true,
    thumbnails: false, //dependendo desse set, os outros de baixo não funcionarão
//  thumbCrop: 'height',
//  easing: 'galleriaOut',
//  _hideDock: false,
//  _closeOnClick: false,
    flickr: 'set: 72157628259563719',
    flickrOptions: {
        max: 30,
        imageSize: 'big',
        description: true,
    },
/*  extend: function(options) {
        var gallery = this; // "this" is the gallery instance
        this.bind(Galleria.IMAGE, function(e) {
            var current = gallery.getData(gallery.getIndex());
            var currImg = current.original;
            var altText = $(currImg).attr('alt');
            console.log(altText, current.title);
        });
    }*/
});
</script>

</div><!--fecha content-->

<div id="footer">
    <p>Copyright &copy; 2000-2011. Todos os direitos reservados. Desenvolvido e hospedado por <a href="http://atipico.com.br" title="Atípico">Atípico</a></p>

</div><!--fecha footer-->

</body>
</html>

```