Multiple Background Image Code


I have been working on my portfolio for a while now, and I was doing great with basic HTML/CSS. BUT! This has gotten in the way of everything: Multiple Background Images. I seem to do okay when working with a single image, but when I get to multiple ones it all collapses.

Now, here are the issues:

  1. How do I have multiple background images? As in, how do I have it so that they are “stacked” or standing properly on top of each other? I have seen multiple tutorials on YouTube, taken FreeCodeCamp and Codecademy on this, and they “explain” it, but I NEED to see examples that I can play with.

  2. How do I have it so that these images do not “flow” or move while the page is being scrolled? (Position can be included here too.) Codepen doesn’t seem to be understand my attempts, so I know I’m goofing this up.

  3. Any advice on working with elements/buttons/images/etc. inside specific background images? So that they don’t move either? I understand the simple 101 seen on tutorials, but I feel like there is one little piece that is keeping it from working for me. (This has been true for other issues I’ve faced.)

  4. Can I be shown the “divine” multiple-background code of the portfolio example given in FreeCodeCamp!?!!?! I know that they claim “Don’t Look At Others! Do It Yourself!” But that isn’t how I think. I need to see people do algebra equations or speak a foreign language in order to understand. Is this available anywhere? Are there other similar examples that would be suggested? I didn’t read a book on baseball and then go to the field, I watched people practice and play over and over.

Thank you so much for any and all feedback.

PS - I know that this may come off as “whining”, and I am exploring/researching/studying others. But I thought I’d throw this on here too. Not just for myself, but to provide resources for others with similar concerns. Please, I don’t intend to be gall about my request. Thanks for any and all help! :slight_smile: