Skip navigation
StevenAitchison
Currently Being Moderated

REALLY need some help with transparent background

Apr 3, 2013 1:37 AM

Tags: #transparency #transparent_background

This is really starting to bug me now as I have searched the forums and the web for hours and still cannot get this to work.

 

I am creating a simple one page site at http://freeselfhelpebooks.org/50ofTheBestPDProducts/

 

I want the header and footer image to have a transparent background with only the text showing, so that the text shows on the background image.

 

So far I have created the header image with a transparent background Modify > Canvas > Canvas Colour > Transparent all good so far.  I have added some text.  Then I save as file type PNG 32, however I still get the background as white as you can see above.

 

I have tried PNG 8 with alpha transparency, no transparency but to no avail.  I have even downloaded Photoshop CS6 and have the same issues.  What am I doing wrong here?

 
Replies
  • Currently Being Moderated
    Apr 3, 2013 8:08 AM   in reply to StevenAitchison

    Have you tried using File > Image Preview to export the graphic? (There is a bug that you may run into if using File > Save As.)

     

    http://forums.adobe.com/message/4695848#4695848

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 9:00 AM   in reply to StevenAitchison

    I'm not sure how you're evaluating these images. I just checked the header.png ("50 of the Best Personal Development Products in the World") in Mac's Preview application, and it seems fine; it's transparent.

     

    I'm wondering if it's web development problem rather than a Fireworks problem. Maybe check your HTML. I see a background color of white on one of your tables. Perhaps that's showing through the transparent PNG?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 10:31 AM   in reply to StevenAitchison

    First of all, your header graphic is fine; it's a transparent PNG. Your footer is a JPEG, which does not support transparency, so you need to resave that file into a different format (like PNG32, or PNG8 w/alpha transparency).

     

    As I was trying to suggest, if you're confused about your graphics, check them in a graphics editor or viewer, not in a web page inside a web browser. Web development is a complex beast, and a lot can go wrong.

     

    In the HTML of your web page, there is a class called "content" being applied to tables and images. This class has a background image being applied to it, which is responsible for the white background on those elements.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points