[FIXED] how to make PNG canvas see-through in pygame when blitting image

Issue

I want to blit pawnPic to the screen and leave the background "invisible" or "see-through". right now the white canvas is blocking up the whole chess board block so it looks terrible. Here is the shortened code that im using.

FPS = 30
black = (0,0,0)
white = (255, 255, 255)
brown = (139, 69, 19)
lBrown = (235, 188, 128)
HEIGHT, WIDTH = 960, 960
game_display = pygame.display.set_mode((HEIGHT, WIDTH))
pygame.display.set_caption("Chess")

boxL = int(((HEIGHT-40) / 8))
clock = pygame.time.Clock()
pawnPic = pygame.image.load(r'C:\Users\Adjun\Dropbox\My PC (DESKTOP-BHG02HU)\Pictures\Saved Pictures\pawnPic.png')
pawnPic = pygame.transform.scale(pawnPic, (115, 115))
pawn1X = boxL * 3 + 20
pawn1Y = boxL * 5 + 20
Exit_game = True
while Exit_game:
    clock.tick(FPS)
    mouse_x, mouse_y = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            Exit_game = False
    game_display.fill(white)
    for i in range(4):
        i += 1
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 20, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 135, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 250, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 365, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 480, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 595, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 710, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 825, 115, 115), 0)

        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 20, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 135, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 250, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 365, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 480, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 595, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 710, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 825, 115, 115), 0)
        pygame.draw.rect(game_display, black, (20, 20, 920, 920), 1)
        game_display.blit(pawnPic, (pawn1X, pawn1Y))
    pygame.display.update()

Also if anyone knows, if i have multiple blitted pawns, how do i make pygame know which image the mouse is over without making pygame check individuall each pixel or each board spot

Solution

Image had been Installed incorrectly, by right clicking and then save image as. This downloaded it as a "fake" png file instead of the png file from the actual website.

fix: Ensure you download the png file from the website

Answered By - Kamil Leocadie-Olsen