Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Flipping a background image in CSS

    Hi,

    There's something that I would like to do but don't believe it is possible.

    I would like to specify a background image in CSS, and then have it repeat-x. The trick is I would like every second image to be flipped horizontally, (like when you flip an image in your paint program). The idea being that because identical edges will be touching each other it will appear to seamlessly flow as one long image with no edges.

    The point of this is to be able to create a background for a semi-fluid layout.

    If anyone knows how this can be done - or if it is in fact impossible - I'd be much obliged if you would let me know.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    here's a question: why wouldn't you just flip the image in photoshop (or whatever), join the two to make one image, then tile that one?

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Two reasons:

    1) That would be twice as many pixels, (and therefore twice as much bandwidth and therefore twice as much time, etc.), for the user to download.

    2) If I have an image that is simply repeated mirrored, then not mirrored, then mirrored for ever I will have a much more fluid layout that can be displayed on any size viewport.

    If it is not possible then that is what I will have to do.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #4
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Of course now that I think about it I realize that point number 2 above is not valid at all. If I have flipped the image and joined it in photoshop the two outside edges will be the same, so when they continue on with a simple x-repeat they'll look seamless.

    So I'm still looking to save bandwidth if anyone has any ideas, but that's it.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #5
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not gonna happen with CSS

    I take no responsibility for the above nonsense.


    Left Justified

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    can you provide a link to the image? not that CSS can handle this, but maybe we can give a few tips to optimize it...

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    It's not actually so bad - I just try to eliminate bandwidth wherever possible.

    Here's the link to the image - I've already done the flip & join in photoshop.
    http://www.johnbeales.com/test/red-bg.jpg

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    hmm... that's looking pretty optimized to me I tried several methods (I ended up lowering the compression of the white areas of the blue and green channels) to lower it beyond 5k and it gets pretty granular after that. This one is at 5.87k:

    and the original at 7.7k:

  • #9
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    pretty good - I'll have to figure out how to do that. Usually I just increase the compression of the whole image.

    Thanks,

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Twice the bandwidth... that's two times a handful of KB!!!




    THINK OF THE BANDWIDTH COSTS! NO, THINK OF THE CHILDREN... THE CHILDREENNNNNN

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No, no!!! Don't make fun of me yet, I've almost got it down to 5.6k!
    Seriously, I have never laughed so hard reading a coding forum before...

  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh... I've expelled some good chortles in my time here, too.

    Seriously though, my point was that I don't think a few K is with the hassle here, do you? You're not doubling your bandwidth on the whole, just for that file, which still leaves it rather small, don't you think?


  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    <sarcasm>Well, Photoshop tells me that 5.8k will download in 2 secs on 56k. TWO seconds. Most images I save take only one second, so this is TWICE as long. We're talking a 100% increase in wait time. </sarcasm>

    Hell, I'd be thrilled with an image at 6k. Most of the time I get photo happy when designing (cathyrivers.com, for example) and I don't end up with anything under 35k. Besides, once it's loaded, it's cached, so they only have to wait once.
    Last edited by rmedek; 08-26-2004 at 05:26 AM.

  • #14
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why do you insist on focusing on ratios? If I have a 1% change of dying tommorow, and it gets upgraded to 2%, it's still not a big deal despite having increased by 100%...

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I've edited my post to reflect my actual views


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •