How to fix text on image? (bootstrap) - tribute page

How to fix text on image? (bootstrap) - tribute page


Currently I made the image position:relative, then set the text as position:absolute. However, the text stays the same size as you drag the screen size (width changes) while the image constantly changes (due to container-fluid). Is there a way to make the text fixed so that both image and text is changed while screen size is changed?

Here is the link to codepen:

Any tips are well appreciated! I am very new to coding, have been doing this on and off (once a week) for about 2 months now. It’s quite hard with no coding background or any programming background, so tips would be awesome.

Thanks everyone.