@josh76543210
Posted
Hello @ughvop,
Here is an example of how you can display and postion two background images:
body {
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-position: top -50rem left -28rem, bottom -57rem right -23rem;
background-repeat: no-repeat;
}
Also, I would recommend using flex-box or CSS grid to center the profile card instead of using margins. This will make the page more responsive. Here is an example using CSS grid:
body {
display: grid;
place-items: center;
min-height: 100vh;
}
Happy Coding!
Marked as helpful
@ughvop
Posted
thanks a lot, the background worked out good but i have overflow scrolling now, both horizontally and vertically. how to fix it? @josh76543210
@josh76543210
Posted
Hi @ughvop,
I'm glad the background worked out good!
I don't see any scrolling when I look at your live site. Can you be more specific?
@ughvop
Posted
when you view it in mobile dimensions @josh76543210
@josh76543210
Posted
Ok @ughvop,
The top image on the card is overflowing on smaller screen sizes. To fix this you can do the following:
- Change the
max-withfrom 18rem to 100vw - Set the
widthto 18rem
.backround-img > img {
max-width: 100vw;
width: 18rem;
}
@ughvop
Posted
thank you! @josh76543210
