Skip to content
OverviewSolutions
5
Comments
1
Ornelle
@Blackysynch

All comments

  • Pouria Zamehran•260
    @pouripzSubmitted over 1 year ago

    Hello, I have a problem with the background of the site. What would you do if you wanted to design the background to look like this project? How do you place the pattern? Thank you for helping me

    Responsive Order summary Css HTML

    2
    Ornelle•70
    @BlackysynchPosted over 1 year ago

    Hi congrats on completing the challenge.

    for the background I suggest using contain instead of cover this ensures that the background fits into the container element.

    In your code

    body {
font-family: "Red Hat Display", sans-serif;
font-size: 1.6rem;
background-image: url(./images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-size: cover;
background-color: var(--pale-blue);
}
 
/*Responsive*/
body {
background-image: url(../images/pattern-background-desktop.svg);
background-size: cover;
background-position: top;
}

    replace by background-size by

    body {
background-image: url(../images/pattern-background-desktop.svg);
background-size: contain;
}

    The background-position is not needed. contain takes care of the sizing according to container size.

    I hope this can be helpful to you...

    Marked as helpful
    1