Using transparent as a colour in CSS sculptor

Hi, I have looked for a post about this question but cannot find one. If one exists please point me to it.

I am making a CSS layout using CSS sculptor. I have used a background image repeated vertically and would like the footer to be see through so the text appears to float over the background image.

Is this possible? The colour I would normally use (in fireworks) chooses default colour rather than transparent.

Thanks a lot
Kristian

In Fireworks:

• New Document > Enter Sizes > Canvas color = Transparent > OK
• Choose your colour from the Tools > colors panel, and use the rectangle tool to cover the image area.
• In the Layers Panel (F2) select the layer, and reduce the opacity slider to however transparent you want it.
• 'Save As' or 'Export' the image as type 'Fireworks PNG'

In Photoshop:

• New > Enter Width Height > Background Contents = Transparent > OK
• Choose 'foreground colour' in the tools panel, and use the Paint bucket tool to fill the layer.
• In the Layers Panel (F7) select your layer and slide the Opacity slider down to what ever transparency you want.
• File > 'Save for Web or Devices' > select PNG-24 > Save

Hope that is what you meant!

Thanks a lot Neilo,

The issue is more to do with CSS sculptor I think. When I am using the wizard and designing my layout I am inserting a background image which has a gradient. The outer wrapper then sits on top of this. I have a header, content and footer area to a single column page and would like to be able to see through the footer so that it appears to just be the background image showing through and then have my text visible on top.

I am struggling with this part as it seems the CSS Sculptor will let me have any background colour I want except transparent.

I wondered if I could finish up the style sheet with (say) a white background on the footer and then go into the style sheet and manually change the colour but I cant seem to work out what colour to change it to in order to make it see through.

I am going to follow your fireworks instructions now but think that is what I already tried.
Thanks

Kristian

Hi Kristian,

Sorry I misunderstood, (maybe I still do!),

If the gradient is the page background, then to be able to see 'through' the footer so you can see the page background, then you would need makes sure that both the outerWrapper and the footer divs have no background colour or images. If you select these divs and check the css panel, you can delete the background colour styles.

You can apply whatever colour or background images you like to the content div (and header div) - the footer will still be see-through (to the page background).

Is this not what you mean? I don't understand where Fireworks comes into it!

This has a transparent footer and outerWrapper divs.

Neilo, I am rather ashamed I didn't work that out for myself, thanks so much. You've made my day. :)

Kristian

Cool. Glad you got it sorted!