Kevin Powell - Community•6mo ago

"how to stop the "fixed" background image from overflowing into other sections

Hello Guys, Can somebody please help me figure out "how to stop the "fixed" background image from overflowing into other sections" of the website. I only want the fixed image to show when I scroll in that section, but I don't want it to be visible when scrolling to other sections, or overflowing from the top and bottom. Thank you https://codepen.io/Eddiev10/pen/YzoXRaG

3 Replies

MarkBoots•6mo ago

well, you are fixing the image relative to the body. if you want a fixed background only on that section, you can make it a background with background-attachment: fixed on that section something like this

.show-img-here{
  background-image: url("https://images.unsplash.com/photo-1718554517666-2978ede88574?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjA5MjcyOTZ8&ixlib=rb-4.0.3&q=85");
  background-attachment: fixed;
  background-size: cover;
}

.show-img-here{
  background-image: url("https://images.unsplash.com/photo-1718554517666-2978ede88574?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjA5MjcyOTZ8&ixlib=rb-4.0.3&q=85");
  background-attachment: fixed;
  background-size: cover;
}

MarkBoots•6mo ago

octavia0914OP•6mo ago

I appreciate that, thank you.

Gaming

Programming

"how to stop the "fixed" background image from overflowing into other sections