Member Avatar for gssmithers

Hi,
I added a scroll bar in div with a fixed height using css as follows:

#container {
    width: 1000px;
    margin: 0px auto;
}
#content {
    background-position: 190px 0px;
}
.central-content {
    padding: 0 1px 15px 1px;
    min-height: 500px;
    max-height: 500px; 
    overflow: auto; 
}

It works ok, but the problem is when I scroll down the picture up there also follows, and it overlaps pictures below. However, when I scroll up, the picture below do not go up. Only pictures on the top. Why? How can I fix it?

Edited by mike_2000_17 because: Fixed formatting
  • 5 Contributors
  • 4 Replies
  • 109 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

The symptoms you describe are exactly what happens when the picture that appears to "follow" the scroll is not part of the same scrolling context as the other images. ' CSS shows a fixed-height scrolling region; without the page markup it is impossible to be 100% certain, which is why asked for the HTML. 's height suggestion and 's note about background behaviour are useful clues, but they don't by themselves diagnose stacking/positioning issues.

Quick checklist to diagnose the root cause

  • Confirm which element actually produces the scrollbar (inspect the computed overflow/scrollable box in DevTools).
  • Check whether the picture is a CSS background on an ancestor or an absolutely/fixed positioned <img> that sits outside the scroller.
  • Inspect position and z-index on the image and nearby containers — a positioned element with a higher stacking context will visually cover content inside the scrolling box.

Practical fixes (pick one that matches the layout intent)

  • Make the visual part of the scrolling content (normal DOM image inside the same wrapper) so it moves with the scroller:
    <div class="scroller">
<img class="hero" src="..." alt="">
<!-- rest of scrollable content -->
</div>
  • If the image should stay visible but not overlap content, use an in-flow sticky header inside the scroller:
    .header { position: sticky; top: 0; z-index: 10; }
  • If the image must be a background on an ancestor, ensure the background is applied to the actual scrollable element or adjust stacking: give the scroller a positioned stacking context and raise content z-index so the background cannot float above in-flow elements.

Notes and references

  • A fixed-position or viewport-attached background will appear to "follow" differently than content inside an inner scroller; that can make overlaps worse.
  • See MDN on CSS positioning and stacking for details: position (sticky) and z-index.

Recommended Answers

All 4 Replies

Member Avatar for gunnarflax

I think you must describe your problem better since people seem to not being able to understand your problem :) atleast I can't.

Member Avatar for Asiic

Please include the HTML

Member Avatar for Member #120589 
min-height: 500px;
max-height: 500px;

Why not just use

height: 500px;

I doubt that this will solve the problem though. I second the call for your html.

Member Avatar for ko ko 
#content {
background-position: 190px 0px;
background-attachment: fixed;
}

Hope this help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.