WordPress.org

Ready to get started?Download WordPress

Forums

Transparent bkgd images turning black when uploaded (14 posts)

  1. ryansequeira
    Member
    Posted 2 years ago #

    Everytime I upload an image with a transparent background, regardless of format (gif, png-8, png-24) my transparent background gets turned into a black background in the media library, and then shows up in my theme with the black background.

    Why is this happening? And what can I do to ensure that my transparent backgrounds stay transparent?

  2. Krishna
    Volunteer Moderator
    Posted 2 years ago #

    That seems to be theme-specific. Which theme are you using?

  3. ryansequeira
    Member
    Posted 2 years ago #

    I wish it was theme specific, but I don't think it is. Without using any of the theme's functionality, when I upload any of these images with transparent backgrounds directly into the media library, it shows up as a black background.

    But in any case, I'm using the DeLuxe theme by ThemeShift

    http://themeshift.com/theme/deluxe/

  4. ryansequeira
    Member
    Posted 2 years ago #

    This is what the actual image looks like:
    http://img.photobucket.com/albums/v621/blackwater/ElAlcazar.gif

    And this is how it shows up in the media library
    http://img.photobucket.com/albums/v621/blackwater/WPMLerror.jpg

  5. Krishna
    Volunteer Moderator
    Posted 2 years ago #

    But I see both the images have black background!

  6. ryansequeira
    Member
    Posted 2 years ago #

    I assure you it's transparent. Probably your browser setting a default black background for viewing images.

  7. Krishna
    Volunteer Moderator
    Posted 2 years ago #

    Yea, you are right. I get them transparent/white on Chrome as well as IE.

    However, can you switch over to Twenty Eleven and see if the problem persists?

  8. michaelstegh
    Member
    Posted 2 years ago #

    Ryan, did you already "activate" the logo in your site/test-article/whatever? If so, please show URL. I cannot reproduce why it shouldn't be transparent.

    I uploaded your image for testing, it showed up with black bg in media library, imported it in a test article, previewed - everything's fine.

  9. ryansequeira
    Member
    Posted 2 years ago #

    Krishna: Twenty Eleven??

    Michael: I'm still trying to figure out how to use this theme and get all my content showing up where I want it, but this is the home page, and I've put the image where it should be.

    http://alcazarcoronado.com/wp/

  10. Krishna
    Volunteer Moderator
    Posted 2 years ago #

    Yes, try to revert to Twenty Eleven.

  11. michaelstegh
    Member
    Posted 2 years ago #

    I think, you inserted your image not as actual size and put in the resized version. Please upload or use the actual size of the image. I suppose resizing causes this viewing error.

  12. ryansequeira
    Member
    Posted 2 years ago #

    AHA! Michael, you are right, I changed it back to Full Size, and that fixed it!

    Thanks a ton guys!

  13. truegritgs
    Member
    Posted 1 year ago #

    I actually was having the same problem but only when I created the original file in Adobe Illustrator (Ai), saved it as an eps (transparent background) then opened the eps in Photoshop. I saved the image as a png and got the black background.

    If I create an image directly in Photoshop, no problem keeping the transparent background, even when resizing it down in WordPress. I am using WooThemes Scrollider theme. http://www.truegritgs.com
    The logo I have on there now is the one created in Photoshop. I took the black box one down, but have yet to try using actual size when I transfer it from Ai.

    I was curious if your logo (with the original black background) was first created in Ai and saved as an eps then opened in Photoshop?

  14. michaelstegh
    Member
    Posted 1 year ago #

    It is not advisable to use eps file formats. Use native file formats for the exchange within the Adobe suite.

    Save your Illustrator file as a normal AI.
    Then:
    - select all,
    - copy, CTRL+C
    - open Photoshop,
    - File > New Document,
    - Paste in, CTRL+V
    - as a Smart Object,
    - enter,
    - hide the background layer,
    - save it as a PNG.

Topic Closed

This topic has been closed to new replies.

About this Topic