Order Summary Component with html and CSS

Hi, Mohomed Fahik! 👋

For the background image, I would recommend making it a background image of the body element instead of using div. I recommend trying to set the background size of it to 100%. It will make the background image adapt through different screen sizes.

One suggestion is always to specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly (like submitting).

Hope this helps. 🙂

👾Hello Mohomed Fahik, congratulations for your solution!

Answering your question:

I've inspected your code and I can see that you've applied the background-image using a tag <img> and playing with the z-index, the way I've found to fix the background was inserting it directly to the body (to be under all elements) and I've set some background properties to manage its size, I saw that you've used a shorthand, but in this case I've written each bg property separated, see the code with the fixes below:

body {
    background-image: url(./images/pattern-background-mobile.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

I can see it working right now with my G Chrome dev tools, do you too the test and say me if it fixes the error you're having with the background.

Hope it helps and happy coding!