Kevin Powell - Community•4w ago

Background Image overflown

code - https://github.com/abhi-zero/profile-card-component preview- https://github.com/abhi-zero/profile-card-component I need some help with the Frontend Mentor project I'm working on, called "Profile Section." The task is to create a card displaying profile details and add two circles in the background—one in the top left (a quad-circle) and another in the bottom right. However, I'm facing an issue with the second circle. Despite using overflow: hidden on both the wrapper and the body, the second circle isn't displaying correctly, and a scrollbar keeps appearing. When I open it on desktop, it works, but when I open the developer tools or view it on mobile, the issue appears again I’d appreciate any advice on how to fix this! Thanks!

GitHub

GitHub - abhi-zero/profile-card-component

Contribute to abhi-zero/profile-card-component development by creating an account on GitHub.

3 Replies

Chris Bolson•4w ago

I have taken a quick look on Chrome and Firefox (on Mac) and am not seeing the scrollbar.

Chris Bolson•4w ago

MarkBoots•4w ago

I wouldnt even place them as images on the page. They are just part of the background, so treat them as such. That way they also wont cause potential overflow

body {
  margin: 0;
  min-height: 100vh;
  background:
    top left url('/bg-pattern-top.svg'),
    bottom right url('/bg-pattern-bottom.svg');  
  background-size: 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: hsl(185, 75%, 39%);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    top left url('/bg-pattern-top.svg'),
    bottom right url('/bg-pattern-bottom.svg');  
  background-size: 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: hsl(185, 75%, 39%);
}

Gaming

Programming

Background Image overflown