I have been running my site for some time now and an issue has appeared as if from nowhere! My local site shows all my .gif images correctly i.e. they have a transparent background. The server originally presented them with a transparent background but now they have a black background.
What do I need to do to ensure they render correctly when uploaded?
Thanks in advance. www.moodpixelprint.co.uk/gallery.htm
Welcome to the forums, @philpayne.
Can you post a screenshot of the issue, as I can’t see any black backgrounds.
1 Like
Thanks for the quick response.
Image attached as requested.
Everything outside the nonagon shapes should not be black.
1 Like
That’s not what we are seeing as the black background does not show.
the images appear to be transparent because if I change the body background you can see the body background fine.
i.e.
I’m guessing you are seeing an old cached version of those images so you may want to clear your cache and try again.
1 Like
Thanks PaulOB.
Cleared cache but no change.
What browser are you using?
Firefox and Chromium on Ubuntu Gnome. Both are fine.
Thanks TechoBear.
I am on Windows 10 and Internet Explorer, Opera, Edge & Firefox all display black backgrounds.
I have windows 10 pro and all my browsers are showing a transparent background (IE11, Edge. Firefox & Chrome).
I also have an imac (macOS High Sierra 10.13.4) and all browsers on that show your images as transparent also (Safari, Firefox and Chrome).
My devices iphone5s and iphone7 also show the image backgrounds as transparent.
I think we can deduce from the above that the problem lies at your end somewhere 
It’s either a cache (or corrupted cache) issue or a problem with your monitor perhaps. You may need to delete all your cache and history properly and not just f5 refresh.
Alternatively load your images into your paint editor (photoshop etc) and just double check they are not corrupted in any way and are showing correctly in the paint package. If so then re-save them under a different name and upload making sure you change the names in the html also. In this way you will determine if it was a cache issue or not and rule that out from the debugging stage.
Note that gifs only have index transparency and you usually have to select the ‘matte’ colour that you want to be transparent in order to get a smoother background. I generally avoid gifs where transparency is required and use pngs instead although they are a higher file size (unless its a very simple image). If your gif is always to sit on a white background then make the background white and don’t worry about transparency.
2 Likes
Thanks for taking the time to help me.
Weird.
All our devices show the same issue (ipad, iphones, laptop).
Dreamweaver LIVE shows no indication of a problem.
I sense a lot of work in my future!
Thanks again for taking the time.
Try this:
Edit:
The images all look OK on Linux FireFox, Vivaldi and iPadMini2 Chrome and Safari
In addition to my email:
I copied the Scratchpad code to Adobe Dreamweaver and your images appeared with a black background???
Dreamweaver is the only place where my images show as intended.???
I believe you need to save the images properly (save as) rather than trying to copy to the clipboard as you will likely lose data along the way. (If that’s what you were doing).
Note that Dreamweaver Is not a browser and should not be relied upon as a wysiwyg.
Does John’s live demo show up as black to you?
When the Scratchpad page is viewed, do the images have a black background?
The images all link to the web page in the original post.
Edit:
@PaulOB, just noticed your amended post
1 Like
Yes they do.
Have you tried renaming the images yet so we can rule out cache issues?
You only have to do one image for testing.
I’ve just done that and no change.
I’m thinking that it may be down to the way i originally created the GIF’s as not all are problemmattic;
In another gallery i have
The first two OK the last not OK.
As I said above when you create a transparent gif you need to specify which colour is the transparent colour otherwise it will not render correctly. Also if you have copied and pasted images you will lose data unless you have saved them properly.
Use a good paint package (photoshop etc) to create your gifs and you should be ok.
However pngs are better suited for transparent images and will not suffer from these issues. For gifs you need to match the transparent colour to match the background of the page otherwise you end up with jagged edges.
1 Like
Thanks PaulOB. Noted.
Update.
I have deleted the cache in my iPhones and all images appear correctly. However on my SurfacePro PC and iPad i have had no luck.
On my SurfacePro I’ve cleared the cache for Win10 using Internet Explorer.
Opened and cleared all history and bookmarks from Opera, Edge and Firefox
I also cleared Bing via my Microsoft Account
I then renamed an image and uploaded it and its webpage and that worked.
So I’m going to do the same with all the rest of the pages with gifs for the short term fix and consider png later.
Thanks everyone for your help on this. Happy to hear any other suggestions at any time.
Regards.
3 Likes
Converting to png, those designs are a little bigger in filesize, but still under 10KB which isn’t bad at all. The header logo actually is slightly smaller as png.
Another option to look at is producing them as SVG.
3 Likes
Well, I renamed all images on one page, amended the code accordingly and uploaded all.
Nothing changed.
I am working with a Surface Pro tablet - perhaps the issue is with it. I cannot check with my desktop PC as i am away from base and a one-man-band so no one to call.
Are you guys still seeing my web page correctly i.e. without black background?
I appreciate you taking the time to help.