Hey StuM, that was a great suggestion. Unfortunately, it didn’t quite work that well for me. I was still having issues with the bottom of the image being covered with the bottom footer section. So I tried a different approach. I’ll write out what I was doing and what I changed to make it work, in case anyone else is looking for a similar solution.
Originally, to create the “whole footer”, I used a section (top-footer) with the image and another section (footer) with the sponsor logos and info. For the top-footer, I used a section with a transparent background and added an image as a background with the footer color on the bottom half, where it is supposed to be cut off. Here is the image I was using:
The image was set as the section background, set as a cover, with a ‘centered’ alignment.
It seemed like a good idea, but for some reason, the image bottom on the top-footer was being cut off by the top of the footer section when the site was published. I experimented with controlling the section size, margins, and whatnot, but nothing worked. I also tried StuM’s suggestion, and it did improve it a bit, but there were still a few issues with alignment and a slight overlap at different breakpoints. But when I was applying StuM’s solution, something clicked and I decided to try a different approach.
For the solution, I made the top-footer section with the blue background. I added a div and made it a vertical flex-box. Inside the flex-box I added an updated image with a transparent background. This image:
Then I added a large top-margin to the top-footer
section in order to clear the content, set the alignment on the flex-box to - Justify: Start, and Align: Stretch, and lastly, I added a negative top-margin to the image to bring it up and align it with the blue background of the top-footer
section. (I had to adjust this negative margin for the different screen sizes)
But when I was writing out what I did, I realized that I could simplify it even more. So my final solution was to get rid of the top-footer section altogether. I just took the flex-box and the image and dropped them directly into the top of the footer section and adjusted the margins and padding.
That was it and now it all works. In retrospect, I should have done this from the start. I seem to have a problem overcomplicating things sometimes.
Anyway, I really appreciate your help StuM. For the video solution and for the inspiration with the footer issue.
I hope my explanation can help other novices avoid overcomplicating things.