Member Avatar for cmills83

On
how did they get the background to fade, but stay with the scrollbar. The bottom of the fade is at the bottom of the visible screen instead of the bottom of the web page. Just scroll down and notice the fade stays the same, how is this done? CSS I am assuming. Thanks!

  • 2 Contributors
  • 4 Replies
  • 185 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by cmills83

Dani AI

Generated

Quick expert note: was right — the effect comes from anchoring the background to the viewport so the fade stays at the bottom of the visible window while the page scrolls. Below are two modern, robust ways to get the same result (and avoid brittle fixed-size images).

One good approach is to layer a CSS gradient over the site background so the fade always lines up with the viewport. This keeps the visual fade independent of page length and scales across resolutions:

body {
  margin: 0;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 65%, rgba(255,255,255,1) 100%),
                    url('site-bg.jpg');
  background-position: top center, top center;
  background-attachment: fixed, fixed;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

If full cross-device consistency is required, implement the fade as a fixed pseudo-element (safer on some mobile browsers) and keep it non‑interactive with pointer-events:none:

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
  z-index: -1;
}

Practical tips: test in several browsers (mobile Safari used to ignore background-attachment: fixed), ensure the image or gradient contrast works with content, and prefer the CSS-gradient method for performance and resolution independence. The layered-gradient approach combines the advantages of an image background with an always-visible viewport fade, which directly addresses the original observation from .

Recommended Answers

All 4 Replies

Member Avatar for Dani 
<body background="gradient.jpg" bgproperties="fixed">
Member Avatar for cmills83

Would I have to make the fade.jpg the correct background size or do the width/height functions work with a background image?

Member Avatar for Dani

You would have to make fade.jpg the correct background size, otherwise it will tile itself (but it will still look fixed like a watermark when scrolling the page). There is no way via standard HTML to not tile a background image - and therefore CSS must be used.

The following will work:

<body style="background: white url(fade.jpg); background-repeat: repeat-x;">
Member Avatar for cmills83

Ah ha, thanks!

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.