Member Avatar for Kruptein

I've seen on a lot of sites that when you scroll down a text, the background image stays the same; If I scroll down the image stays on the place and the piece of text that can't fit on the image height is shown on a white background;

how can I make the image scroll down with the text?

  • 3 Contributors
  • 3 Replies
  • 80 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kruptein

Dani AI

Generated

and are on the right track: the visual difference the original poster noticed is controlled by the CSS background behavior. Their examples show the image held in place while text scrolls over it (the "fixed" behavior). For the opposite — having the image move with the page content — make sure the background is not fixed and that the image or container is sized or repeated so it fills the area as content grows.

If the page shows white under the image when content extends, there are a few non-destructive choices: use vertical tiling, scale the background to cover the container, give the container a fallback background color that blends with the image, or place the picture inline (an <img> inside the flow) so it scrolls naturally and remains responsive and accessible. Also verify the background is applied to the element that actually scrolls (body/html vs a specific scrolling wrapper) and that no other CSS rule overrides it.

Quick troubleshooting: inspect the computed styles in developer tools to see which element carries the background and whether background-size/background-repeat are active; test across desktop and mobile (some mobile browsers treat fixed backgrounds differently or have performance issues). See the CSS references for details: background-attachment and background-size.

Recommended Answers

All 3 Replies

Member Avatar for scranton

i think background-attachment is the style property you're looking for

<body style="background-image:url(image.jpg);background-attachment:fixed">

Member Avatar for macneato

Scranton is correct. Go for shorthand though

background:#fff url(../images/myimage.jpg) no-repeat fixed;

Oh by the way, you must ensure your image is large enough or gradients into your default background colour or its just gonna look strange.

Edited by macneato because: n/a
Member Avatar for Kruptein

OK 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.