I was wondering if anyone could help me with this: My students are working in App Lab for the CSP Unit 3 Project. One of my students is trying to place a transparent image on the screen, and even though a google image search produces many such pictures, trying to use one in App Lab leaves the transparent checkerboard pattern. I assumed it was a png with transparency. Is there something we’re doing wrong? I’ve been unable to help my student.
@jgregory Thanks for asking this question. Please post a link to the project so that we can see the code. I will also pass on to the curriculum team.
1 Like
Go to Remove.bg and upload the graphic there. It will truly remove the background. Download the image from remove.bg and then upload that image to Code.org App Lab, and it will work perfectly.
That does sound like a fine workaround, but our school has some limitations on what students are permitted to upload and download on school devices. I was looking for a solution that involved directly using image URLs for transparent PNGs found via Google search.
I’ve noticed that when I google for images with transparent backgrounds, the images provided are not always transparent. Instead, they are a .jpeg thumbnail, and if you go to the website you can download the .png version. (sometimes for a fee!) This can be a little confusing for students because they see the checkered background and don’t realize it is a screenshot of said background. I’m not sure if this is what is happening for your students, but when a student does get a .png file that truly has a transparent background it seems to work great.
One way to find them is to use the google image search tools (Search in Google > Images > Tools > Color > Transparent) to make sure it is filtering only transparent images. Below is a GIF I found, the first half of which seems to be helpful for my students going down this pathway.
1 Like