Member Avatar for DGStudios 
textarea { overflow: auto; }
input { overflow: auto; }

.background { background-attachment: fixed; background-repeat: no-repeat; background-position: center; z-index: 0; top: 0px; left: 0px; height: 100%; width: 100%; position:fixed; }
.content { z-index: 2; top: 0px; left: 0px;  text-align: center; position: absolute; width: 100%; }

Okay I found a really simple CSS workaround fro the missing cursor problem, by setting overflow to auto for those items the cursor reappears. However I have a problem. I have a background image that I fix to the background and let the rest of the page float over the top of it. As such the .background is the div containing the background image. .Content is where the board contained.

If I remove the position: fixed; from the .background class the cursor appears but the background is no longer fixed and the content doesn't 'float' over it. position: fixed; is required for the 'floating' page.

How can I keep my page 'floating' and still get the cursor to appear. Thank you.

DGStudios

  • 2 Contributors
  • 2 Replies
  • 141 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DGStudios

Dani AI

Generated

This is a rendering/stacking issue in Firefox rather than a problem with input caret logic. The overflow:auto tweak you found forces a repaint so the caret comes back, but there are cleaner, more robust approaches that avoid hacks.

If possible, move the fixed background onto the page itself instead of using a full-screen fixed DIV. Applying the image to body keeps it out of the stacking/interaction flow and prevents it from interfering with form controls:

html, body { height: 100%; margin: 0; }

body {
  background-image: url("your-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

If you need a separate element for the background (parallax layers, alpha overlays, etc.), keep it visually behind everything and make sure it does not capture pointer/focus events:

.bg-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: url("your-bg.jpg") center/cover no-repeat;
  pointer-events: none; /* modern browsers: prevents it from intercepting clicks/focus */
}

.app {
  position: relative;
  z-index: 1; /* ensure form controls are on top */
}

A note on ’s suggestion: float:none won’t affect a fixed full-screen layer — floats work in normal flow and won’t change stacking between fixed and positioned elements. Test changes in the Firefox versions you target. For very old browsers that don’t support pointer-events on HTML, prefer the body-background or negative z-index approach and ensure your content has an explicit stacking context (e.g., position: relative; z-index: 1).

Recommended Answers

All 2 Replies

Member Avatar for sreein1986

give in your float:none then check I think it works fine

Member Avatar for DGStudios

There are four different CSS delcarations.

which of the four do I put it in?

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.