How to make footer background image fit in mobile view and higher resolutions

Since your background image has a repeating pattern, I recommend cropping to a single set of elements, then letting the image tile or repeat on the x-axis.

background-repeat: repeat-x;
background-size: contain;

It’s difficult to keep the footer content out of the bottom strip of background dancers for all different viewport widths. I suggest making this a separate footer element so it can “float” below the footer textual content regardless of content height.

Thank you for the response.
I cannot crop it in a single element as the dancers are in different shapes and forms.
Please help me fix it such that it looks like this: https://snipboard.io/hB1DVs.jpg on every screen.

The 5 different dancers do not repeat? They look the same to me. Why can’t the 5 different forms all be a single background image that is tiled horizontally?

Whether you do that or not isn’t as important as dissociating the top and bottom elements. Why? Because the footer content height and width changes with viewport width. It’s impossible to get a fixed aspect image to have variable aspect without cropping or blank areas.

If the dancer’s were a separate element below the main footer content, the image can “float” to match the footer content’s current aspect ratio. By using separate, tiled images, the amount of data needed to compose the footer is much less, meaning improved page load speeds.

I understand now. It worked after cropping and repeating them. Thank you so much.