Order Summary Component with HTML and CSS

I agree with @Fluffy Kas about the separate stylesheet for CSS. However, I believe that removing background-position is not the answer to your problem.

From MDN-Docs: "background-position sets the initial position for each background image"

If you want the background to be static you need to get rid of the background-size property which sets the size of the element's background image.

Notice that you specified in your media query: background-size: contain;

If you get rid of it the background will remain static (the size of it won't change with the size of the window). Having it set the property to contain is actually the right thing to do though, since it makes sure that the SVG background always covers all the background.

Hope you find that helpful. Cheers!

Also, remember there is a separate background image for mobile devices.

Hiya, good looking solution!

Remove the background-position and it will stay static. Also, I'd suggest linking a separate stylesheet for your css, it's not really good practice having it in your html file.