Responsive Card Design using HTML5 & CSS3 (Flexbox, Background Positio

What are you most proud of, and what would you do differently next time?

I'm most proud of achieving a fully responsive design for the order summary card and successfully implementing the fixed background pattern. Initially, getting the background image to cover the viewport and remain fixed without unwanted movement proved challenging, but through experimentation with position: fixed, a separate background container, and various background-size and background-position values, I finally achieved the desired visual effect. Additionally, I'm pleased with the layout of the card itself, utilizing Flexbox to structure the elements, particularly the horizontal alignment of the plan details and the "Change" link. The card adapts well to different screen sizes, maintaining its intended design.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered was getting the background image to behave as a fixed element that covered the entire viewport without unwanted scrolling or resizing issues. Initially, I tried applying background-attachment: fixed; directly to the body, but I experienced unexpected movement when the viewport was resized. To overcome this, I implemented a separate div with the class .background-container. This container was styled with position: fixed;, top: 0;, left: 0;, width: 100%;, and height: 100vh; (later adjusted). Applying the background image and the background-attachment: fixed; property to this dedicated container solved the issue and provided more control over the background's behavior.

Another challenge was ensuring the horizontal alignment of the "Annual Plan" details and the "Change" link within the card. I initially had these elements in separate divs and struggled to align them correctly on the same line. I overcame this by wrapping them in a single container (<div class="bases">) and utilizing Flexbox with display: flex; and justify-content: space-between; to distribute them effectively. Adjusting the align-items: center; property within this container also helped to vertically align the text and the icon.

Finally, I spent some time fine-tuning the background-size and background-position to achieve the desired visual presentation of the background pattern across different screen sizes. Experimenting with values like auto, cover, and specific pixel dimensions, along with adjusting the background-position, allowed me to find a balance where the pattern was visible and appropriately scaled without being too overwhelming or distorted.

What specific areas of your project would you like help with?

I'm relatively new to using position: fixed for background images. Could anyone review my implementation of the .background-container and suggest if there are more robust or best-practice ways to achieve a full-viewport fixed background?