Transparent image (logo) on top of of random image

[AlexCuria]

Hello to the TL community,

I'm new to this CMS and have tried and tested probably the same number of different CMS systems in the past years that have ever existed starting from Postnuke hahaha.

I need some assistance for a small problem.
I have added the header module with a random image so that each page refresh gives a different header image. This is working perfectly but I would like to add a company logo (transparent gif) on top of the image. Instead of adding this logo to each image in photoshop would it be possible (and how) to add it via CSS. I've tried putting in the header module a class ID "logo" and then in the css following code:

#logo  {
	background: url('../img/logo.gif') no-repeat;
	height: 100px;
}

... but it doesn't show up. Maybe it can't work or maybe I'm doing something wrong but my knowledge is too short to sort this out on my own.

Many thanks for any help.

[planepix]

Hi Alex,

try to write this:

#logo  {
   position:absolute;
   top:30px;
   left:100px;
   height: 100px;
   width:300px;
   z-index:1000;
}

to get the div #logo to an absolute position and z-index to bring it to the front.

Then create a custom html modul with:

<div id="logo">
[img]tl_files/pathtotheimage.gif[/img]
</div>

you need to make your values for coordinates

[AlexCuria]

Thank you planepix for the help but I didn't manage to get it working. :?

I made the stylesheet as you said but I can't make a Custom module with the code inside the header because the header has it's own module with the random image script.
The only thing I have managed is that the logo appears beneath the random image but I need it in top (not above). Maybe I have to edit the header template or create my own template just for the header but I'm afraid of breaking everything apart and having to do a reinstall :|

[planepix]

Hi Alex,

make a Module for div #logo as custom html code and place it as second module in page layout section to head line before your module for the random images.

Frontend-Modules

• Module ------------------------ Column
  logo ----------------------------Header
  random-images -------------- Header

[AlexCuria]

Hi planepix,

thank you for your help but without any new changes now it's working. I think maybe it was a cache problem because last time I posted in the forum it didn't work and now it's working perfectly without changes. Now I just have to sort out the exact position. Next task is getting the horizontal menu to work changing the active tab depending on the page but that will be a new question.

As I said, thank you for your support.
mfG
Alex