Member Avatar for XinJiki

I am trying to write CSS code that will give me a fixed background and scrolling content. I need the content to be contained with it own separate back ground that scrolls with it. If someone could point me in the right direction so I can learn how to do this I would be highly appreciative. Thanks

  • 5 Contributors
  • 5 Replies
  • 125 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by XinJiki

Dani AI

Generated

As described, the goal is twofold: a stable page background that stays put, and a content area that scrolls while carrying its own background. ' note about a fixed background and /'s advice about making the content element scrollable are the right building blocks. A robust, cross‑browser pattern is to place the fixed artwork behind everything with a fixed-position layer (pseudo-element) and let the content box handle its own background and scrolling.

A minimal, practical pattern:

/* full-viewport fixed background (sits behind page content) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

/* content box that scrolls and carries its own background */
.content {
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: rgba(255,255,255,0.95) url("panel-bg.png") repeat;
  padding: 20px;
  box-sizing: border-box;
}

If the page should only allow the inner box to scroll, constrain the body (for example, set body height to 100vh and disable its scrolling) and let the content element handle overflow. Common pitfalls: no inner scrollbar appears when the element has no explicit height; absolutely positioned children won't contribute to the scrollable height; z-index on the fixed layer can hide content if mis-set. For keyboard accessibility, give the scrollable container focusability (tabindex="0") so arrow keys work. On some mobile browsers, the classic CSS background-attachment approach can be flaky; the fixed pseudo-element shown here is more reliable. See the specs and behavior notes on background-attachment - MDN and overflow - MDN for details.

Recommended Answers

All 5 Replies

Member Avatar for hericles

Its been a while since I've done that but the CSS should be:
background-attachment: fixed

commented: Didn't deserve a downvote IMO. Upvoted +repped here. +4
Member Avatar for lps

sorry, wrong post...please ignore me or delete my post

Edited by lps because: n/a
Member Avatar for dantinkakkar

You're looking at the overflow property. Set the overflow property to scroll .

overflow: scroll

This will make your element boxes scrollable, and attach a background using the background attribute.

Member Avatar for weekendrockstar

Yes, both are correct and it just depends on which method you are aiming for. Normally a browser will repeat a background image by default when the text flows beyond the browser's screen height unless the attached argument is set to fixed then the text will be moved by the browser's side scroll bar but the image will not move to compensate which makes the text seem to float over it. But this affects the entire browser screen.

Since it seems that you are trying to scroll only a certain segment then you should use both. Assuming that you would want to use a DIV as the 'container' you should create a CSS class for it which sets the overflow to scroll and specify the background image and have it "fixed" as well.

This way your whole site won't have a fixed background if not necessary but the content box will look how you want it to.

Member Avatar for XinJiki

Thanks a lot. I will give this a try.

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.