Resize background image using media query

Tell us what’s happening:
Hello i am trying to resize my background- image using css, width-range( 767 to 1023 px).
Actually i thought it will resize it self, but it is not can any one tell me what changes i need to apply here.

I want my background -image:url() to resize when my window is between 767x (Y) and 1023x (Y).
check inside my css header and media query

Your code so far
https://codepen.io/DVGY/pen/VwYGbaR

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge: