Member Avatar for I.Dunno

I used the method to stretch a background image with CSS from this page http://www.daniweb.com/forums/thread140397.html and it works great in all the modern browsers I tested but I had 2 problems: 1. it doesn't validate (how much does this matter?) and 2.it doesn't work in older IE browsers

Any thoughts on this? Should I use conditional comments to use a different method for the old IE browsers (and if so, what method?) and just ignore the validation error?

  • 3 Contributors
  • 7 Replies
  • 178 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Agarsia

Dani AI

Generated

Three practical approaches, ordered by modern best practice and backward-compatibility cost.

The cleanest solution is pure CSS with background-size. It keeps markup semantic (no decorative <img> in the flow) and works in current browsers (IE9+ and all modern mobile/desktop browsers). Example:

html, body { height: 100%; }

body {
  background: url("images/bg.jpg") no-repeat center center fixed;
  background-size: cover;
}

For validation: the W3C error saw is fixed by putting any shim image inside a block element (a div) — that is why wrapping the image solved the validator complaint. Prefer the CSS approach above so there is no decorative image in the HTML at all.

If legacy IE support is required (IE6–8), use a separate, IE-only stylesheet via conditional comments. Two reasonable fallbacks are (a) accept a tiled or centered static background in those browsers, or (b) use an IE-only scaling filter as a last resort:

/* IE-only stylesheet */
body {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
}

Important caveats: AlphaImageLoader and similar hacks have performance, caching, printing, and z-index drawbacks. Often the least-painful path is a simplified IE stylesheet that omits the stretched background rather than trying to fully mimic modern behavior.

Decide based on analytics (as suggested) — if legacy IE users are a small portion, progressive enhancement (modern CSS + graceful fallback) is the right tradeoff. Also optimize the image size, serve smaller images via media queries for mobiles, and ensure decorative images have empty alt attributes if an <img> shim is ever used.

Recommended Answers

All 7 Replies

Member Avatar for TheAlex

Around 15% of users to a site I help manage still use IE6 or older, so I wouldn't say you should stop optimising for older browsers just because Facebook and YouTube do. It depends on your user base and whether you feel the extra time to optimise is worth losing a certain number of visitors.

It's always more beneficial to have a page that validates - some search engines will favour it and it's better for accessibility.

Member Avatar for Agarsia

Hm ok, because i hate Internet Explorer 6 or older, i would display a box that says, the user should download a newer browser, because of lack of displaying the page and lack of security and more...
But, yes with 15% of the users using these Browsers, you should optimize it...

And to validate your website I would use the w3c valiator, which outputs every error exactly with line and says what exactly is wrong, and then simply correct it in the sourcecode

Member Avatar for I.Dunno

I usually do a separate style sheet for IE6 that is simplified but in this case, I don't know of a way to stretch the background image for IE6. Anyone know if it is possible?

The method that I linked to above has you place the image first on your page with the css defining the size. However, the W3c validator says "document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag"

Member Avatar for Agarsia

Does the IE 6 optimization in the link you posted above not work?

How does your html-code look like? this:

<html>
<head>
...
</head>
<body>
<img id="bg" />
<div id="content">
...
whole content
...
</div>
</div>
</body>
</html>

?
maybe just create a div arround the img-tag, like:

<html>
<head>
...
</head>
<body>
<div>
<img id="bg" />
</div>
<div id="content">
...
whole content
...
</div>
</div>
</body>
</html>
Member Avatar for I.Dunno

Hi,
Thanks much for the help!
Putting the div tags around the image solved the validation problem and the page still works fine in modern browsers.

I hate to give up entirely on IE7, although I hate it, because I personally know people still using it (sigh). The only problem I'm having with it is that the background is tiling instead of stretching, not too serious. The problem I'm having in IE6 is that the page content doesn't want to display until after the background. I usually put together a style sheet just for IE6 and simplify everything so maybe I will just skip the stretched background in that and let it tile.

Member Avatar for Agarsia

ok :) no problem.
if you can do the problems you posted by self please mark this thread as solved

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.