468,107 Members | 1,294 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

Fluid container with tiling background

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?

Nov 27 '07 #1
7 2061
rf

"Nik Coughlin" <nr******@gmail.comwrote in message
news:fi**********@aioe.org...
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.

--
Richard.
Nov 27 '07 #2
"rf" <rf@invalid.comwrote in message
news:m4*******************@news-server.bigpond.net.au...
>
"Nik Coughlin" <nr******@gmail.comwrote in message
news:fi**********@aioe.org...
>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.
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.

Nov 27 '07 #3
Nik Coughlin wrote:
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 :P

Jeremy
Nov 28 '07 #4
In article <Wp*****************@newsfe24.lga>,
Jeremy <je****@pinacol.comwrote:
Nik Coughlin wrote:
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 :P
What are these ways?

--
dorayme
Nov 28 '07 #5
In article <IQ**************@newsfe19.lga>,
Jeremy <je****@pinacol.comwrote:
dorayme wrote:
In article <Wp*****************@newsfe24.lga>,
Jeremy <je****@pinacol.comwrote:
Nik Coughlin wrote:
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 :P
What are these ways?

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.

--
dorayme
Nov 28 '07 #6
Nik Coughlin wrote:
>
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
Nov 28 '07 #7
dorayme wrote:
>
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
Nov 28 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by David Winter | last post: by
reply views Thread by Jim Hubbard | last post: by
3 posts views Thread by Viken Karaguesian | last post: by
reply views Thread by kirby.urner | last post: by
2 posts views Thread by lister | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.