Skip to content
Submitted about 2 years ago

html css

Moscow•420
@MOSCOW2022
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello all so my only problem is the background wave i dont know how to do it if some one knows please let me know how

thank you for the answers!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi Moscow, congrats on completing this challenge!

    Here’s some tips to improve your solution code:

    The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

    Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%,

    body {
    background-image: url(../images/pattern-background-desktop.svg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    background-color: hsl(225, 100%, 94%);
    font-family: "Red Hat Display", sans-serif;
    background-size: contain;
    background-repeat: no-repeat;
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Moscow•420
    @MOSCOW2022Posted about 2 years ago

    @correlucas thank you sir just did it

    0
  • Muhammad Huzaifa Ghori•160
    @Huzaifa1910Posted about 2 years ago

    Hello Moscow!

    I guess you should use a background image on the <body> tag in ur CSS by doing this you can easily apply your background image with this you also have to give some attributes like background-repeat: no-repeat; background-size: 123px; /whatever your size will be/ and you can also use shorthand don't worry it is not that hard

    Happy Coding!

    Marked as helpful
    1
    Moscow•420
    @MOSCOW2022Posted about 2 years ago

    @Huzaifa1910 thank you i just did it

    1
  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hello, Moscow! 👋

    I can't access the repository at the moment. It looks like it is a private repository. If that's the case, make it a public repository.

    For the background image, have you done some research on the internet? What is the technique that you have tried to show the background image?

    0
    Moscow•420
    @MOSCOW2022Posted about 2 years ago

    @vanzasetia yeah sorry i think my repositories are private,i'm gonna make them public for the upcoming challenges thank you for checking it ! and i just did the background image

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord