Member Avatar for kidwon

Hey guys,

Have you ever facing this bug in IE6 of body background image scaling?
A png file repeating-x longer than the display and it's being scaled by IE6!

Any ideas?
10x

  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by guyinpv

Dani AI

Generated

described an IE6 quirk where a decorative PNG used for a horizontal repeat appears to be resized to match the centered content area instead of rendering at its native dimensions. correctly points out that IE6 is buggy, but when IE6 must be supported there are a few focused checks and simple fixes that reliably resolve this kind of symptom.

Common causes to check

  • A PNG "fix" for IE6 (scripts or CSS that use the AlphaImageLoader filter) applied to the page or body. That filter often scales images to the element and will affect body backgrounds if applied there.
  • Background applied to the wrong element: IE6 treats html and body backgrounds differently from standards browsers; moving the background off body can change painting.
  • Quirks mode or hasLayout interactions. Missing or non‑standards DOCTYPE and hasLayout triggers on parent/child elements can change how IE6 tiles or paints backgrounds.

Practical, low‑risk fixes

  • Serve a simpler background to IE6 via conditional comments, applying the repeat to html and clearing body for IE6 only. For example, use an IE6 conditional stylesheet that places the tiled image on html and removes any PNG-fix filters from body.
  • Temporarily replace the PNG with a non‑alpha test image (JPEG/GIF) in IE6 to detect whether an AlphaImageLoader or PNG hack is the culprit.
  • Remove or change the fixed height on the centered container to verify whether the body tile is being clipped to that element.
  • If the page uses a PNG fix library, exclude the body from that fix or apply the fix only to the specific elements that need alpha transparency.

Diagnostic checklist (in order): confirm standards DOCTYPE, search CSS/JS for AlphaImageLoader or known PNG-fix scripts, try the non‑alpha image test, move the background to html in an IE6-specific stylesheet, and if needed serve a simpler tiled image just for IE6. These steps isolate the cause without changing the page for modern browsers.

Recommended Answers

All 3 Replies

Member Avatar for guyinpv

Not sure exactly what you mean. You say "scaling" I assume the image is being stretched, and you said "repeating-x longer than the display" so this means your image is being stretched AND tiled horizontally?

Explain what is happening in detail, are you trying to tile an image or just show it once or what? Also if you have the relevant HTML and CSS to post that would be great.

Member Avatar for kidwon

The code is quite simple:

<style type="text/css">
*{margin:0; padding:0; }
body{background:url('images/bg.png') repeat-x;}
#main{background:url('images/main.png') no-repeat; width:966px; height:773px; margin:0px auto; }
</style>
<body>
<div id="main"></div>
</body>

Well you see for some reason IE6 is fitting the body background image to "main" div size instead of showing it's real size.
By "longer than the display" I mean it's longer vertically on my monitor 1080 > 1024.
But on second thought this isn't the problem because it's fitting it to div's size not because it's taller then the display.

I guess that's all, I hope this could help for a solution.

Edited by kidwon because: n/a
Member Avatar for guyinpv

The code is fine for modern browsers. As long as you write well-formed and proper code, I wouldn't worry too much about IE6.
If you want your DIV centered in IE you'll have to add text-align:center, but otherwise it looks fine in the bulk of browsers.

I can't even see what it would look like in IE6, I don't know anybody who uses it. And IE6 was buggy with CSS and DIVs anyway.
I don't know any designers who try to make things look good in IE6. Just test for IE6 and put a big message that says "you dolt, upgrade your browser or go away!"

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.