I like fluid web designs. And I expect background pictures, say those used in a header, to expand and contract as the windows is pulled about. Unfortunately this is not quite fully supported. However it is good enough. The pictures resize instantly with no noticeable delays in all browsers except for ie.
In the css add:
#header {
background: url(‘mtn.jpg’) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
In the html add:
div id=”header” blah blah /div
(The div tags are missing their angle brackets because I don’t understand how to make wordpress show html code without it altering it.)
Which should cause the picture to stretch to fit the width and height. I’ve tested it with ie, firefox, opera, konqueror, and chrome. Chrome works perfectly with no hacks even allowing for rounded edges. It sort of works with firefox, opera, and konqueror but you lose the rounded edges. Internet explorer does not work at all unless you consider seeing only part of your image a success.
Anyways, this is a great solution which most people do not seem to know about. The awful javascript, sliced photos, and css tricks that saturate the internet are no longer needed…
Much of this information came from https://developer.mozilla.org/en/CSS/-moz-background-size
