I've been trying to achieve a horizontally tiled image that is also vertically proportioned to a percentage of the browser window.

As an example, I've made the following file:
http://adrael.com/Test/TileResize01.html

The top strip horizontally tiles the WhiteDot image properly.
The lower White Dot resizes properly as the browser window is resized (but is not tiled!).

I've tried many ways to get the tiled strip to also do what the bottom image does, with no success.
Not sure whether this is even possible, or is there in fact a very simple solution that I am just not seeing???

This post has been edited by Emor: Feb 22 2011, 06:21 PM

404

Backgrounds don't stretch and inline images don't tile, so basically you can't do it.

Maybe you can work around it by repeating a stretched inline image. I wait until you've posted the right URL. It's easier when one sees what it's supposed to look like.

As always. thanks for the reply, Pandy. If it's impossible then I'll give up and punt with Plan B.

Actually I did catch my own error and fixed it, prior to your post:

OK, I don't know how you are going to use this, but something like this could maybe work.





I don't think all browsers will scale the image from a 100% height though.

I see what you're suggesting, and for a few large repeats (such as in the demo I made) it would work.

But in the actual application, if the browser window was kept wide but shortened vertically, the scaling effect on the art would necessitate more and more repeats coming in from each side as the window height was reduced...and this approach would fail.

I keep thinking there's some div-in-a-div way to force this effect, but just haven't found it yet.
Or I may be delusional.......

True, if the height is allowed to approach zero the number of repeated images approaches infinity. But why not set a min height of the container element? A normal web page would not be readable below a certain height anyway (some browsers don't even let you resize below a certain point). That should give you a corresponding max number of repeat IMG elements (which can be calculated).

And it doesn't cost anything extra to have a repeat the image tag a reasonable numbers of time. I'm more worried about that some browsers won't play at all.

Thanks everyone!
Yes, the infinite-repeat-image works just fine for my application, and it's now in place.

And it seems all browsers accept it just fine!
There is only one one anomaly under one condition:
I applied Pandy's solution to the earlier WhiteDot test, you can see it in the bottom row here.
If you have a wide screen, you can see that, with a tall image, the right side of the div gets clipped for some reason that I can't fathom.
With smaller-height images, this clipping is never seen.

This is not a problem for me at the moment, just a glitch I don't understand...but that's not unusual!

I don't see any clipping?

I doesn't work in IE6. Don't know about 7 and so forth. I still don't know how you are going to use this, but you may want to use conditional comments to save the versions of IE that don't scale the image from the ugliness.

In Firefox #tileband only covers the window width, i.e. ends when you scroll right. This should be normal since the DIV is 100% wide.

In Opera I get different bugs depending on version.

Oh, a version difference again. I see it in FF too. In K-Mel (older gecko version) it works perfectly and there is no scrolling.

These additions fix the big dots.




I'm tired of every version of every browser doing things differently. They spit them out at an irritating pace now too.