Order Summary Page using HTML and CSS

Hi Anthony!

Background issue can be solved with media queries, where you change the url to background-image.

Additionally, I would suggest editing some of the properties, like bg-size, bg-position, bg-repeat.

Here is the link to resource you can use to solve the issue:

And as a tip, you can set bg-color as the other color that compliments background

As for solution this one worked for me:

body {
    background-image: url("./images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    background-color: hsl(225, 100%, 94%);
}

@media (max-width: 960px) {
    body {
        background-image: url("./images/pattern-background-mobile.svg");
    }
}

It's not perfect, but does the job.

Hope it helps!

For the question, ask chat gpt about how to use picture element to make an img has different src's in different screen widths