Member Avatar for acediamond

I am playing around with a website I am developing for my spouse. I am wondering how you fix an image within a frame or htm doc. so even when you need to scroll the background image stays fixed within the frame or page.

  • 2 Contributors
  • 3 Replies
  • 125 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by lio04

Dani AI

Generated

: the goal you described (an image that stays put while the page scrolls) is best handled with CSS. was right that CSS is the way to go, but there are two different approaches and a few common reasons the image won’t appear.

First, a quick distinction: pinning an element in the viewport (useful if you place an actual IMG or DIV) is different from pinning a background image. For a background that stays behind your content, use the background attachment/size properties so the image is treated as the page background rather than a positioned element. See the spec notes on background-attachment.

If the image does not show, check these in order:

  1. Relative path mistakes — URLs in CSS are resolved relative to the CSS file, not the HTML file. Try an absolute URL or a correct relative path to confirm.
  2. Browser dev tools — open the Network panel and reload; look for a 404/403 for the image and check the computed style in the Inspector to see which rule is applied or being overridden.
  3. CSS errors earlier in the stylesheet — a parsing error can drop later rules, so validate or temporarily move the rule to the top.
  4. Overlays — page elements (tables, wrappers) with opaque backgrounds can hide the body background; ensure those elements are transparent if you want the background visible.
  5. Caching and permissions — clear cache or force-reload; verify server file permissions.

One more practical note: some mobile browsers historically ignore fixed backgrounds. If you need consistent behavior across devices, use a full-viewport element behind content (a fixed-position container or a pseudo-element) as a progressive enhancement, and use background-size (see background-size) to make the image scale.

Recommended Answers

All 3 Replies

Member Avatar for lio04

There's solution with CSS, but it's running correctly from IE7 to higher. (And other quality browsers of course.)

position: fixed;
Member Avatar for acediamond

what should the code be in the css for a fixed image on the background behind the tables. I now how to fix it I have something wrong with the image even showing up on any of the pages. I am using firefox3. what should the bg image tag look like?

Member Avatar for lio04

If I understand, you want fixed background and any content above that.

This is example on HTML body tag styled with CSS.

body {
	background: url(./image.png) top center fixed no-repeat;
}
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.