How can I reveal the text from behind the image?

Question

How can I fix this?

I Cannot see the text above the background image, how do I create a surface that appears on top of the background image?

I'm trying to make buttons for my game so i'll need to get more and more text onto the front page but nothing is working to make the text appear above the image and it pops up without the text despite the 'flip' function and update function being present in the code.

#Err0r AttributeError: type object 'pygame.surface.Surface' has no attribute 'text_surface'

pygame.init()
screen = pygame.display.set_mode((1000,800))
clock = pygame.time.Clock()
pygame.display.set_caption('The Chieftain')
test_surface = pygame.image.load('ChieftainGameFolder/Pictures/Game Background/background.PNG').convert_alpha()
tw = test_surface.get_width()
th = test_surface.get_height()
#place elements here, what makes the game run
test_surface2 = pygame.transform.scale(test_surface, (tw * 1.11482720178 ,th * 1.12201963534))

text_font = pygame.font.SysFont("Arial",30)
def draw_text(text, font, text_col, x, y):
    img = font.render(text,True,text_col,)
    screen.blit(img, (x,y))
TEXT_COL = (255,255,255)

#gameloop
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()



    draw_text("Chieftain", text_font, (0,0,0), 500, 400)

    screen.blit(test_surface2,(0,0))
    screen.blit(pygame.surface.Surface.text_surface, (500,400))
    pygame.display.flip()
    pygame.display.update()
    clock.tick(60)

Answer 1

First blit background, next blit button, and later draw_text()

screen.blit(background, (0,0))
screen.blit(button, (500,400))
draw_text("Chieftain", text_font, (0,0,0), 500, 400)

That's all.

---

BTW:

If you want to put text in center of button then you should keep positons as pygame.Rect()
and later you can use text_rect.center = button_rect.center

screen.blit(button, button_rect)
text_rect.center = button_rect.center
screen.blit(text, text_rect)

---

Minimal working code

I use pygame.Surface to generate background - so everyone can simply copy and run it without image.

You can click mouse in any place and it will move button to this place and it will center text on this button.

import pygame

# --- constants ---  # PEP8: UPPER_CASE_NAMES

WINDOW_WIDTH  = 1000
WINDOW_HEIGHT = 800

TEXT_COL = (255, 255, 255)
# --- classes ---   # PEP8: CamelCaseNames

# --- functions ---  # PEP8: lower_case_names

def generate_text(text, font, color="black"):
    image = font.render(text, True, color)
    rect  = image.get_rect()
    return image, rect

# --- main ---

pygame.init()

screen = pygame.display.set_mode((WINDOW_WIDTH, WINDOW_HEIGHT))
pygame.display.set_caption('The Chieftain')

#background_image = pygame.image.load('ChieftainGameFolder/Pictures/Game Background/background.PNG').convert_alpha()
background_image = pygame.Surface((WINDOW_WIDTH, WINDOW_HEIGHT)).convert_alpha()
background_image.fill("red")
background_rect = background_image.get_rect()

button_image = pygame.Surface((200, 50)).convert_alpha()
button_image.fill("green")
#button_rect = button_image.get_rect(x=500, y=400)
button_rect = button_image.get_rect(center=background_rect.center)  # center button on screen
#button_rect.center = background_rect.center  # center button on screen

text_font = pygame.font.SysFont("Arial", 30)

text_image, text_rect = generate_text("Chieftain", text_font, TEXT_COL)
text_rect.center = button_rect.center  # center text on button

clock = pygame.time.Clock()

while True:
    # - events and updates (without draws) -
    
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()
        if event.type == pygame.MOUSEBUTTONDOWN:
            button_rect.center = event.pos  # set button in new position
            text_rect.center = button_rect.center  # center text on button
        
    # - draws (without updates) -
    
    screen.blit(background_image, background_rect)
    screen.blit(button_image, button_rect)
    screen.blit(text_image, text_rect)
    pygame.display.flip()
    clock.tick(60)

---

PEP 8 -- Style Guide for Python Code