Transparent Header images in Twenty Eleven

  • Author
    Posts
  • #646146

    Hi,

    I want to use images with transparency in the Twenty Eleven theme.
    Unfortunately, if I upload a PNG with Transparency, WordPress would change my image in a black one! :-(

    Any advice how to achieve this?

    The blog I need help with is crakette.wordpress.com.

    #646346

    noirciplume
    Member

    Have you tried using GIF.

    WordPress doesn’t work all the time when using transparency.

    #646350

    I just tried, and this gives same result as PNG.
    Black replacing Transparency

    #646355

    mmadfan
    Member

    This can also be browser-dependent. I know that older versions of IE often don’t render transparency correctly.

    #646357

    noirciplume
    Member

    Although I do believe you can add an Opacity/Transparency To An Image Using CSS. I do not know if that will work on WP. But if you have CSS, you can give it a try.

    #646359

    Hi, thx

    @mmadfan
    This is not browser dependent, my browser handles really well transparency :-)
    It is about WordPress transforming the image after download in a one without transparency, I guess Imagemagic or GD (I dont know what is the library used)

    @noirciplume
    Yes,indeed, but here it would not solve the problem, as you can add opacity to all the image, not a part of it only, hence the need to support transparent images.

    #646361

    timethief
    Member

    You must presize the image prior to uploading so it it the exact size. If the cropper comes into play transparency will render as black. https://en.forums.wordpress.com/tags/transparency

    See here also > https://en.forums.wordpress.com/topic/i-want-to-change-the-height-of-the-header-image?replies=3#post-638894

    #646365

    timethief
    Member

    Also note that once you CSS edit the theme you can no longer use the header image uploader. You must include the URL for the header image you upload into the Media Library in the CSS stylesheet.

    [Staff Update: The above statement isn’t true. You can use the header image uploader and CSS, you just have to make sure you don’t override the image using the custom CSS you add.]

    #646369

    Interesting, but slightly not matching with what I experience ;-)
    I’ll dive into it a bit later … I have found a workaround quick and dirty > my header is directly part of my background. I loose a couple of nice things but it works.

    #646370

    timethief
    Member

    Okay. Please don’t start multiple threads in the future because it drives Volunteers crazy when we have to rabbit hop to more than one to answer you. :)

    #646372

    I understand :-) I wont start a new thread!

    #646373

    timethief
    Member

    You can start a new thread on a new topic but when you post duplicate threads relating to your header image and your CSS editing of your theme it is confusing. The bottom line here is only Staff and couple of Volunteers help with CSS and it appears none of them are around right now so you will have to be patient. :)

    #646381

    Do you mean my two thread “Transparent Header images in Twenty Eleven” and “I want to change the height of the Header image” were duplicated?

    because I don’t think so, they are two different issues, independent one another, and tackling them in a single thread would be confusing imho. :-)

    #646409

    When wordpress crops or resizes an image for a header (that was not to the exact dimensions required in the header uploader, it saves the resulting image as a JPG. That is the main reason you lose the transparency.

    Since you are talking about resizing the header image, that brings more things into play as well and I touched on those in the other thread you started on resizing a header image (where I need more info before I can proceed).

    #646479

    Thx,
    That explains it.
    I think that also when I try with the exact image size I loose transparency.

    Cheers

    #646585

    @rolandofurioso, can you point us to the URL of the PNG you uploaded to your media library so we can take a closer look?

    #646619

    comedyfrog
    Member

    Are you using the dark theme option by any chance? If so the background of the page is set to black in the dark.css. You are seeing the background colour through your transparent header image.

    You can override this in your child theme style.css with something like
    #page {
    background-color: transparent ! important;
    }

    #646621

    zynikerin
    Member

    Thank you timethief, your answer just helped me very well. First I had a png with transparency, then a jpg without transparency [white background] but it still wouldn’t work. Scaled the image to the right size and suddenly it was displayed perfectly fine :)

    #646625

    partybabe, can you send me the pic you have uploaded? I am using Piano Black and I am viciously proud of it, but yet I cannot gain transparency. Think you could help me? Email me back: (email redacted)

The topic ‘Transparent Header images in Twenty Eleven’ is closed to new replies.