Transparent logo showing with white background in Pique header
-
The image file is clearly properly made, since in the Customize area it shows up with the grey background of that panel behind it. But on the page, it’s on white, while the background is an image that’s mostly dark blue.
This is especially frustrating since the theme demo is clearly using a transparent logo in this area.
Has this happened to anyone else? Any ideas?
The image is a PNG if that helps.
-
Hi, Can you confirm for us which blog you are referring to so we can take a look to see the issue you are facing?
There appear to be two main reasons your image is appearing with non transparent background:
- The image actually isn’t transparent even though when you created it, even though everything appeared to be correct (See this thread). Check your image in another image viewer app or if uploaded, right click image and choose ‘view image in new tab’ then check for chequered pattern for the background.
The theme CSS adds a non transparent layer below the image file.(See this thread) To resolve this you need to be able to edit CSS, in order to be able to do this, you need to be subscribed to a paid premium or business plan https://wordpress.com/plans/ .
Others here may also have alternative ideas of things you can try to resolve this issue.
Hope this helps.
-
It’s on thefantasyreadersurvey.com, but this site has a ‘Coming Soon’ mode active and so you won’t be able to view it. I could take this off temporarily if really needed but I would prefer not to, in case anyone who shouldn’t sees the half-finished site.
The chequered pattern is appearing in the background when the image is viewed in the Media library, but only grey appears when it is viewed in its own tab. ??
I can add custom CSS via the customizer – I haven’t checked if I have access to what’s already there anywhere. Perhaps I can over-ride it? Or create a child theme? Never had to bother with either of those things before so not sure if relevant, but I’d be game.
-
Just realized the ‘Support’ link I clicked has taken me to a WordPress.COM forum. Oops! This is a self-hosted site.
I got this theme through the ‘Jetpack Themes’ link, which installed it for me from WordPress.com, so I suppose this could be the only forum for it. Hmm.
-
Not sure if there’s a way I can customize this bit of code from the other thread for my purposes?
.image-3 img { background: none !important; border: none !important; }Or this:
#secondary-content img { background: none; border: none; }Which was the apparent fix from the other thread. Tried out a few things with them that didn’t work, but it’s finicky stuff so second opinions appreciated.
-
Hi, not a problem, I think you first need to ensure your image is being displayed with transparent background as per this image:
otherwise there will be nothing you can do to resolve this with CSS, so if you have opened the image in new tab and it doesn’t show as transparent (and you ahve tried in another browser to be sure?) then it’s back to your image as the issue.
I have seen people suggest using alternative applications to create the transparent background images, perhaps this will work for you also?
And don’t forget, as your site is not a WordPress.COM hosted site, you should also ask over at the WordPress.ORG support forums for mroe advice there!
-
This thread over on the WordPress.ORG forums looks similar if your issue is not the image itself:
https://wordpress.org/support/topic/transparency-of-background-image-for-front-page-a-footer/
Hope this helps!
-
Curiously, that demo image you linked also didn’t display the chequered background in a new tab, just grey! I checked it out with Chrome – as expected, it had the chequered background there. As did mine. Apparently that was just a quirk in my browser.
Guess what else worked properly in Chrome…. the transparent header logo!
Now I’m scratching my head about it all for a different reason. Why have I got this problem now (recent but across the board, or only with this theme? I don’t know) when I’ve never had any problem using transparent images on WordPress sites with this browser before??
Utterly strange.
(My habitual browser is IceDragon, if anyone’s interested, which is a Comodo-i-fied version of Firefox. A bit niche, but until now very reliable.)
I will do some more digging based on this discovery…
Thanks for the links!
-
Hi, glad you’ve got to the bottom of this one, although reveals another issue, hopefully it’s isolated to that particular browser but it’s well worth checking your site in several browsers for comparison.
The WordPress guide to troubleshooting browser issues is worth s look in case you haven’t
Also
https://make.wordpress.org/support/user-manual/web-publishing/browser-issues/
-
Updates on my tests so far!
The problematic image views fine in the header of my other WordPress site, even with the same browser.
The transparent header image from the second site views fine in the header of the site I’ve been having trouble with!
The first of these tests led me to think that the problem was with the site, not the image. The second suggests the opposite conclusion!
Of the two images, the problematic one was made on my mate’s Photoshop, and the working one was made on some random ‘Your Text Here’ website for fancy font pngs on a transparent background (it was a placeholder). So not made in the same program. What that tells me, idfk :P
The problematic image and site pairing are viewing fine in Chrome and Opera, but not in Firefox-based browsers. (I don’t really want to install IE just to test this… but I might later.) So I can’t really leave this alone as a niche browser issue, since Firefox is pretty popular.
So, currently it seems to be just the combination of Firefox-based browsers, this image, and this website… and I’ve no idea where the weak link is.
Will have a closer look as the browser issues links you’ve kindly offered and see if I can get another copy of the image or something (could check if my mate’s Photoshop installation is up to date too).
-
Probably don’t need to be going into so much detail, but if anyone has the same problem in future…. (Although I’m starting to think that’s unlikely, given how specific this problem is!)
-
Hi, Thanks for the update, and do also ask over that the WordPress.ORG forums as it’s possible others there will be able to advise further.
For a great full featured alternative to Photoshop that is the standard for Linux system users, but available for all platforms is GIMP
You can make reliable transparent background images and anything else you could possibly want to do with an image!
Let us know how you get on! Thanks.
-
Quick next update – I got my friend to send me the same image saved as a GIF and none of these problems are happening. Such a simple solution to a very odd situation.
I’m aware that PNG is the standard for this, but I can’t think of any problems with using a GIF instead? So I’ll leave it at that for now (I have the rest of my website to set up!) and might return to this later to see what more I can puzzle out.
GIMP is bookmarked for later investigation, thank you :)
-
Hi, Glad you have found a resolution to this issue! If a GIF works, great, but ideally you should use PNGs, see what the w3c says on the matter:
https://www.w3.org/QA/Tips/png-gif
GIMP is the open/free alternative to Photoshop for those who aren’t married to Photoshop! IMHO it can do 99% of what most people will need to use it for, indeed it’s overkill for creating simple web graphics. There are hundreds of great and simple alternatives out there also, Irfanview is a classic for Windows (and Mac) users http://www.irfanview.com/ which can do trasnparent backgrounds, which I remember using with success many moons ago…!
Glad to have been of help!
-
Hi krskn82 – looks like you’ve found a workaround for your PNG issue. Thanks for pitching in, Andy!
These forums are indeed for sites hosted on WordPress.com, but you’re running the WordPress software on your own hosting. If you need help in the future with the self-hosted version of Pique, feel free to post in its forum at WordPress.org:
https://wordpress.org/support/theme/pique
You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:
- The topic ‘Transparent logo showing with white background in Pique header’ is closed to new replies.
WordPress.com Forums 