close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Using transparent as a colour in CSS sculptor

Thread began 1/19/2010 8:20 pm by kristian.stott308372 | Last modified 1/20/2010 8:46 am by neilo | 1195 views | 5 replies |

kristian.stott308372

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

Sign in to reply to this post

neilo

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!

Sign in to reply to this post

kristian.stott308372

Using transparent as a colour in CSS sculptor

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

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

kristian.stott308372

Big thanks

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

Kristian

Sign in to reply to this post

neilo

Cool. Glad you got it sorted!

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...