Member Avatar for dantheman50_98

Hello,

I am creating a new site and I have run into a problem with adding a background image to the html tag.

The image has repeat-x and is positioned top and right. The problem is that though it looks great on 1024 wide resolutions it goes balls up when the resolution is reduced. A large wad of whitespace appears to the right and the image moves left into the rest of the page.
I solved this by adding a min-width to the body and html tags but this stopped the wrapper div from moving left to fill the whole screen on lower resolutions.

Any solutions? Even using javascript instead of css would make me a happy man to be honest here...

The url is http://musicultra.com/test/test.html
Thanks
Dan

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

Dani AI

Generated

A few practical, cross‑browser ways to keep a horizontally repeating band pinned to the viewport edge without breaking your layout.

Browsers treat a background on the root element differently, so the simplest reliable fix is to move the background off the root and give the wrapper the layout constraints instead. Put the repeating image on body (or on a full-width element) and avoid setting min-width on html/body — put any min-width on your page wrapper. If you want the pattern tied to the viewport edge (so it never “slides” as the page narrows), use background-attachment: fixed.

/* put bg on BODY, not HTML; leave html/body flexible */
html, body { height:100%; margin:0; padding:0; }

body {
  background: url("images/bg-repeat.png") repeat-x right top fixed;
}

/* constrain the layout only on the wrapper */
#wrap { margin:0 auto; min-width:760px; }

If you need more control (or want the bg to scroll independently), create a fixed, full-width layer behind content using a pseudo-element or an absolutely/fixed positioned DIV:

body { position:relative; }

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;       /* height of the repeating band */
  background: url("images/bg-repeat.png") repeat-x right top;
  z-index: -1;
}

Troubleshooting tips: confirm a standards DOCTYPE (quirks mode changes root/background behavior), test across browsers and window sizes, and try anchoring the repeat to different positions if partial tiles are showing. Some older engines handle partial tiles inconsistently, so anchoring to the viewport (fixed) or using a full-width element is the most robust approach. For reference, see browser behavior notes on background-attachment and background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment and https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.

Recommended Answers

All 4 Replies

Member Avatar for dantheman50_98

Thanks,
It looks like I will be rebuilding it in order to get the yellow background working properly though.

Member Avatar for death_oclock

I tested it myself and it worked regardless of the resolution. What browser did this occur in?

Member Avatar for dantheman50_98

This was in Firefox 3. I have just checked in Internet explorer 7 and it looks even worse.

Member Avatar for MidiMagic

When you use repeat, it will not load the next repetition unless the entire image will fit again. But I don't see your trouble. I see scrollbars appearing to scroll the page, rather than changes in the page.

Which image is repeated? I can't tell this without the stylesheet..

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.