Frontend Mentor | Ornelle's profile

@pouripz

Submitted about 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

Ornelle• 70

@Blackysynch

Posted about 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

Ornelle

All comments

Responsive Order summary Css HTML