Self-Service - Layering content over an image

[tlgriffin447]

Hello all,

I'm in the process of customizing my company's self service portal and am having trouble understanding how to layer a portal menu over an image. Under the header is an image I created as a dynamic block. --

And here is the lower section of the page. --

I would like to "layer" the portal menu over the building, so that the building becomes the background image behind the horizontal menu blocks. Any thoughts and or suggestions? Thanks, all!

[justin_drysdale]

You can and probably should use CSS positioning for this.

http://alistapart.com/article/css-positioning-101

It is also useful to know about HTML image maps:

Image map - Wikipedia, the free encyclopedia

[Mark Stanger · Accepted solution]

One other suggestion in addition to Justin's might be to create a custom layout (you can copy the one you're currently using) just for the homepage where that background is being applied.   This would allow you to access the code and apply a class name to the overall background div for that section.   Once you did that it would be very easy to add a 'background-image' style to that div just for that layout.   A setup like this would mean that you could simply add content to that section on the form and it would always sit over the top of that background image.   A couple of steps but could be accomplished in 15 minutes or so and would completely remove this headache if you wanted to do the same thing on other pages.

[Jerome11]

Would it be possible to provide some code snippets for those of us who are novices in this area?

Thanks

[ChrisBurks]

There are multiple ways to solve this issue. CSS at first look may seem like the easiest but it all depends on what the end result would look like. I've created a screencast to show one possible solution using CSS and the different elements you may need to style to achieve the desired result. However, creating a new layout I think would give you more control.

http://screencast.com/t/dew33mE8F