Member Avatar for junerbug

Hello!

I'm in the process of building a website for a local church, and I'm having problems with the background doing an extra repeat than it should! ANY advice is very welcome... Thanks!

http://abra.broken-faith.net/Draft/indextest.html

http://abra.broken-faith.net/Draft/index.html (This one's also doing some loopy things in IE (compared to Firefox) I'm not sure what's causing the problem in this one, as there's not much difference between it's style sheet and "indextest.html"'s.)

Again, any help welcome! Thank you!

  • 2 Contributors
  • 2 Replies
  • 102 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Two separate problems show in the thread: the background image is tiling more than expected, and an ImageReady map doesn't work in IE. Both symptoms commonly come from layout or markup differences between browsers — especially missing/old DOCTYPEs (quirks mode), where the browser treats the html/body box sizes differently, or from applying the background to the wrong element while using absolute sizing/positioning. was right to push CSS over legacy attributes; the steps below tighten the layout so tiling behaves predictably.

Quick checklist to diagnose and fix the background tiling:

  • Validate the page markup (missing tags can alter layout).
  • Ensure the page uses a standards DOCTYPE so IE uses standards mode.
  • Inspect computed styles for the html and body elements in dev tools to see which element carries the background and what its height is.
  • Move the tiled graphic onto a wrapper that spans the page instead of relying on body quirks; give html/body full height and the wrapper a min-height so the tile repeats only as intended.

A minimal structural example (put the background on a wrapper and keep html/body at 100% height):

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body { height: 100%; margin: 0; }
    #pageWrapper {
      min-height: 100%;
      background: url('images/side-tile.png') repeat-y top center;
    }
  </style>
</head>
<body>
  <div id="pageWrapper">...</div>
</body>
</html>

Image-map notes (why IE can fail where Firefox passes): maps use fixed pixel coordinates tied to the image's natural size. If the image is CSS-resized, filtered (PNG hacks/AlphaImageLoader) or has CSS transforms, IE is more likely to lose the map hit areas. Confirm the <img> has a correct usemap and the <map> has a matching name attribute, then test the map on a clean page without extra CSS/filters.

Further reading: background-repeat (MDN), , HTML <map> (MDN).

Recommended Answers

All 2 Replies

Member Avatar for junerbug

Me again...
It's also not displaying an image map made in Adobe ImageReady in IE for some reason. I'm getting pretty ticked with IE right about now...

Member Avatar for MidiMagic

We can't read the stylesheet. Please post it.

The "background=" attribute is deprecated. Instead, use the style:

body {background-image: url(yourfile.jpg); background-repeat: repeat-y;)

I have never seen "repeat=" defined for the body tag. It is not in any of my manuals.

Also, you will have trouble using any absolute locations, because different computers have different window sizes and resolutions.

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.