Fluid container with tiling background

[Nik Coughlin]

One thing that has always annoyed me, and I just design around it, is having
a tile that you want to use for your background image that doesn't
seamlessly tile, in a container that you want to be fluid. I had a go at
it, but had to use JavaScript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the JS?

 

[rf]

One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that doesn't
seamlessly tile, in a container that you want to be fluid. I had a go at
it, but had to use JavaScript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the
JS?

Notice that you have to "do" stuff to make this happen. More precicely you
have to *do* stuff to certain margins on browser resize. Since neither HTML
nor CSS actually *do* stuff, but merely describe how other stuff is layed
out (they are not programming, despite the L in HTML), you are IMHO out of
luck.

BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page
is made wider. These browsers fire onresize after every mouse move, not at
the end of the resize operation - a page re-layout re-paint after every
pixel and the repaint is not smart, it erases the canvas to white and then
paints the new content.

 

[Nik Coughlin]

Notice that you have to "do" stuff to make this happen. More precicely you
have to *do* stuff to certain margins on browser resize. Since neither
HTML nor CSS actually *do* stuff, but merely describe how other stuff is
layed out (they are not programming, despite the L in HTML), you are IMHO
out of luck.

Yeah, I thought as much, but I also thought that maybe some jiggery pokery
magic with percentage widths, negative margins etc. might be able to hack
together into something that works. Haven't thought that approach through
far enough to know for sure but I suspect that it wouldn't be possible.

BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page
is made wider. These browsers fire onresize after every mouse move, not at
the end of the resize operation - a page re-layout re-paint after every
pixel and the repaint is not smart, it erases the canvas to white and then
paints the new content.

Yuck.

 

[Jeremy]

One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that
doesn't seamlessly tile, in a container that you want to be fluid. I
had a go at it, but had to use JavaScript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the JS?

I can think of a couple of ways to do that without Javascript, but all
of them are far less elegant than just using the JS

Jeremy

 

[dorayme]

I can think of a couple of ways to do that without Javascript, but all
of them are far less elegant than just using the JS

What are these ways?

 

[Jeremy]

What are these ways?

OK, here is one (I can't resist a good CSS challenge)

http://www.duckwizard.com/ciwas/square.html

Here's how it works (Like I said, FAR worse than the JS solution - don't
say I didn't warn you):

1) Outer box with tiling background image (the image is 32px square).
This box floats so as to adjust to the width of its non-positioned
contents. 32px padding to make room for background image to show through.

2) Inner box which floats as well, and is relatively positioned so that
it can be the positioning parent for the content box.

3) Content box which is absolutely positioned and is set to take up most
of the width of the parent (using all of top, bottom, left, and right
attributes is a substitute for padding here)

4) Inside the inner box, there are several hundred (heh) floating 32x32
boxes which make room for the content. Since they float, when put
together, they will always make heights and widths that are multiples of
32. This space they create will expand the inner box, which will expand
the outer box and the content box.

Yeah, pretty ugly (and not a real solution by any means). But hey, you
asked

Tested in Gecko, IE, and Opera.

Jeremy

 

[dorayme]

OK, here is one (I can't resist a good CSS challenge)

http://www.duckwizard.com/ciwas/square.html

OK, looks quite clever an attempt. I guess it would be tricky to
adjust to the surrounding not overlaying the text at the bottom
(in my FF and Safari) when the font size is upped a notch or two
by the user?

It fails a bit in Safari, the right vertical col is not clean (it
is one and a bit 'question boxes' wide. So still not up to Nick's
js in simple performance. Not yet at any rate. <g>

My swim is coming up soon. Got to go.

 

[Nik Coughlin]

OK, here is one (I can't resist a good CSS challenge)

http://www.duckwizard.com/ciwas/square.html

Here's how it works (Like I said, FAR worse than the JS solution - don't
say I didn't warn you):

1) Outer box with tiling background image (the image is 32px square). This
box floats so as to adjust to the width of its non-positioned contents.
32px padding to make room for background image to show through.

2) Inner box which floats as well, and is relatively positioned so that it
can be the positioning parent for the content box.

3) Content box which is absolutely positioned and is set to take up most
of the width of the parent (using all of top, bottom, left, and right
attributes is a substitute for padding here)

4) Inside the inner box, there are several hundred (heh) floating 32x32
boxes which make room for the content. Since they float, when put
together, they will always make heights and widths that are multiples of
32. This space they create will expand the inner box, which will expand
the outer box and the content box.

Yeah, pretty ugly (and not a real solution by any means). But hey, you
asked

Still, very cool. Breaks in some situations, but I think we have gone
beyond real world usage here anyway Now I'm gonna have to try and think
of another out-of-left-field way to do it...

 

[Jeremy]

Still, very cool. Breaks in some situations, but I think we have gone
beyond real world usage here anyway Now I'm gonna have to try and
think of another out-of-left-field way to do it...

I think a Javascript solution is your best bet; it may not look terrific
for the fraction of people with JS disabled, but the page will still
function correctly and that's the important thing.

However, there are a couple of things you could do to improve the JS
solution, particularly for IE. One thing I can think of is using a
short timeout to update the box, and canceling the timeout if it hasn't
already occurred by the next resize. That way you will avoid the
constant redrawing that causes it to look so bad in IE during the resize
(essentially making it behave like Firefox does, where it only updates
when you stop resizing).

But that's getting off topic (and you probably already know you can
improve the JS). By the way, your page works fine in IE6.

Jeremy

 

[Jeremy]

OK, looks quite clever an attempt. I guess it would be tricky to
adjust to the surrounding not overlaying the text at the bottom
(in my FF and Safari) when the font size is upped a notch or two
by the user?

It fails a bit in Safari, the right vertical col is not clean (it
is one and a bit 'question boxes' wide. So still not up to Nick's
js in simple performance. Not yet at any rate. <g>

My swim is coming up soon. Got to go.

Yeah - text size adjustment is the least of the problems. The bigger
problem is that you have to calculate for each content box how many
floating squares you need to pad the box out enough. And then - like
you said - it will break if someone has a text size that doesn't mesh
with yours.

I tried this with 32em width and height to account for this (which
theoretically should work to some degree, as the grid boxes will always
be a multiple of 32px IF the font size is an integer) - not only was the
quantization level much too great for it to be useful, but the text size
is apparently NOT always an integral number of pixels (which surprised me).

Anyway, I don't think a CSS solution exists that would be more elegant
than a good Javascript solution. Javascript is great for adding extra
decoration features - as long as it's unobtrusive and gracefully degrades.

Jeremy