@Mitko90Submitted over 1 year ago
Hello,
This is my solution
Maybe you can help me with the positioning of the background image. I couldn't make it look like the provided design.
Thanks in advance
Hello,
This is my solution
Maybe you can help me with the positioning of the background image. I couldn't make it look like the provided design.
Thanks in advance
Hello Mitko,
You can correctly position the background image by setting its background-position as top.
Here are the styles that helped me achieve the desired result:
body {
background-color: var(--pale-blue);
background-image: url(./images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: top;
}
@media (max-width: 700px) {
body {
background-image: url(./images/pattern-background-mobile.svg);
}
}
The media query is to change the background image when on small screens.