Help needed from the experts

[Servoc]

I need a little help with a project for my website, if it can be done. What I want to do, is cut out the state from this image, and incorporate the outline into my background page. Then in the center of the page, where the state is now, I would have an image scroller showing my pictures for my project, layered behind the cutout.

Here is the picture. The red star is the capital, and doesn't have to be left in.



Thanks in advance if anyone can help me out with this image, or guide me to another forum where I can get the needed assistance.

Servoc

[Twey]

Try making the inside transparent, then layering it over the top with a <div>?

[jscheuer1]

I'd do it a little differently. First, in an image program I'd make the entire white part of the image transparent or whatever color the rest of the background of the page is or whatever color you like. Then set it as the page's background, center no-repeat (style blocks go in the head of the page):

<style type="text/css">
body {
background:url('alabama.gif') pink center no-repeat;
}
</style>

In the above, 'pink' can be any valid color name or a hex value like #efeae0 and it will be the background color of the page in those spots not covered by the image. If the image's white areas have been saved as transparent, it will show through there as well. Now, put whatever you like on top of this on your page. Just make sure that any elements in the markup that you want the state image to show through have their background-color set to transparent, ex:

<div style="background-color:transparent;"></div>

Simply having no background-color style and no bgcolor attribute set at all may be enough. If you are using an iframe, make sure its allowtransparency="true" attribute is set:

<iframe name="frame1" src="frame.htm" allowtransparency="true"></iframe>