Transparent Header images in Twenty Eleven
-
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: (visible only to logged in users)
-
-
-
This can also be browser-dependent. I know that older versions of IE often don’t render transparency correctly.
-
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.
-
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. -
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
-
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.]
-
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. -
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. :)
-
-
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. :)
-
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. :-)
-
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).
-
Thx,
That explains it.
I think that also when I try with the exact image size I loose transparency.Cheers
-
@rolandofurioso, can you point us to the URL of the PNG you uploaded to your media library so we can take a closer look?
-
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;
} -
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 :)
-
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 visible only to moderators and staff)
- The topic ‘Transparent Header images in Twenty Eleven’ is closed to new replies.
WordPress.com Forums 