Fluid container with tiling background

Discussion in 'HTML' started by Nik Coughlin, Nov 27, 2007.

  1. Nik Coughlin

    Nik Coughlin Guest

    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?
     
    Nik Coughlin, Nov 27, 2007
    #1
    1. Advertising

  2. Nik Coughlin

    rf Guest

    "Nik Coughlin" <> wrote in message
    news:fig3o2$dds$...
    > 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.
     
    rf, Nov 27, 2007
    #2
    1. Advertising

  3. Nik Coughlin

    Nik Coughlin Guest

    "rf" <> wrote in message
    news:m4N2j.17470$...
    >
    > "Nik Coughlin" <> wrote in message
    > news:fig3o2$dds$...
    >> 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.
     
    Nik Coughlin, Nov 27, 2007
    #3
  4. Nik Coughlin

    Jeremy Guest

    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
     
    Jeremy, Nov 28, 2007
    #4
  5. Nik Coughlin

    dorayme Guest

    In article <Wp43j.3622$>,
    Jeremy <> wrote:

    > 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
     
    dorayme, Nov 28, 2007
    #5
  6. Nik Coughlin

    Jeremy Guest

    dorayme wrote:
    > In article <Wp43j.3622$>,
    > Jeremy <> wrote:
    >
    >> 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

    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
     
    Jeremy, Nov 28, 2007
    #6
  7. Nik Coughlin

    dorayme Guest

    In article <IQ43j.489$>,
    Jeremy <> wrote:

    > dorayme wrote:
    > > In article <Wp43j.3622$>,
    > > Jeremy <> wrote:
    > >
    > >> 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
     
    dorayme, Nov 28, 2007
    #7
  8. Nik Coughlin

    Nik Coughlin Guest

    "Jeremy" <> wrote in message
    news:IQ43j.489$...
    > dorayme wrote:
    >> In article <Wp43j.3622$>,
    >> Jeremy <> wrote:
    >>
    >>> 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
    >
    > 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...
     
    Nik Coughlin, Nov 28, 2007
    #8
  9. Nik Coughlin

    Jeremy Guest

    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
     
    Jeremy, Nov 28, 2007
    #9
  10. Nik Coughlin

    Jeremy Guest

    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
     
    Jeremy, Nov 28, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U3JpZGhhcg==?=

    stretching the background image instead of tiling

    =?Utf-8?B?U3JpZGhhcg==?=, Nov 23, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    8,275
    Mats Lycken
    Nov 30, 2005
  2. Replies:
    3
    Views:
    899
    Neredbojias
    Feb 25, 2007
  3. Shelly

    Tiling of background image.

    Shelly, Dec 4, 2007, in forum: HTML
    Replies:
    7
    Views:
    442
    dorayme
    Dec 4, 2007
  4. Dave Kelly

    tiling background images

    Dave Kelly, Mar 23, 2008, in forum: HTML
    Replies:
    1
    Views:
    399
    Jonathan N. Little
    Mar 23, 2008
  5. William Gill

    when is fluid a design too fluid?

    William Gill, Aug 17, 2010, in forum: HTML
    Replies:
    9
    Views:
    655
Loading...

Share This Page