Help - Search - Members - Calendar
Full Version: Image tiling plus dynamic resizing: possible?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Emor
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???
pandy
QUOTE(Emor @ Feb 23 2011, 12:17 AM) *

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


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.
Emor
As always. thanks for the reply, Pandy. If it's impossible then I'll give up and punt with Plan B.

QUOTE(pandy @ Feb 22 2011, 06:24 PM) *

404....I wait until you've posted the right URL. It's easier when one sees what it's supposed to look like.
Actually I did catch my own error and fixed it, prior to your post:
IPB Image
happy.gif
pandy
OK, I don't know how you are going to use this, but something like this could maybe work.

CODE
#WhiteDotVertSize {
   position: absolute;
   top: 40%;
   height: 50%;
   white-space: nowrap;
   overflow: hidden  
}


HTML
<div id="WhiteDotVertSize">
<img src="Images/WhiteDot.png" height="100%" alt="" /><img src="Images/WhiteDot.png" height="100%" alt="" /><img src="Images/WhiteDot.png" height="100%" alt="" /><img src="Images/WhiteDot.png" height="100%" alt="" /><img src="Images/WhiteDot.png" height="100%" alt="" /><img src="Images/WhiteDot.png" height="100%" alt="" />
</div>


I don't think all browsers will scale the image from a 100% height though.
Emor
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....... wacko.gif
Christian J
QUOTE(Emor @ Feb 23 2011, 09:33 AM) *

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.

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). cool.gif
pandy
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.
Emor
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! rolleyes.gif
pandy
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.
Christian J
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.
pandy
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.
pandy
These additions fix the big dots.

CODE

body                 { margin: 0; padding: 0 }
#WhiteDotVertSize    { width: 100% }



I'm tired of every version of every browser doing things differently. They spit them out at an irritating pace now too. angry.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.