My background looks bad on mobile portfolio page

The background images don’t show up correctly on a mobile device, is there a solution for making the background appear the same on a mobile device as it does on or pc’s web-browser? OR is there an easy way to set the background so that it is a solid color when the screen size is small?

Also: why doesn’t the “hamburger” work on freecodecamp’s display of the codepen?

I can’t see any issues. What do you think the problem is?

I would like to either have the image appear in the mobile view as it does on a web browser, or be able to set the background so that it reverts to a solid color if the screen size is too small for the image.

I tried searching for a solution, but either I don’t know the correct terminology, or. . . there isn’t a solution.

My guess is I need to learn how to write functions, then make something that sets the background based on the screen size. . . or just make the background a color since I’m sure millions of people are going to want to look at this portfolio now that I’ve designed 2 simple websites. . . . . . . .

You could start by setting the sections (#section1, #section2, #section3) height css to heigth: 100vh (https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths),

You then could center the content of each section by nesting the content within a <div class="row vertically-centered-content">.
With these css parameters:
.vertically-centered-content{ top: 50%; transform: translate(0, -50%); position: relative; }