...

View Full Version : Flipping a background image in CSS



johnnyb
08-24-2004, 08:01 AM
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

rmedek
08-24-2004, 08:14 AM
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?

johnnyb
08-24-2004, 08:17 AM
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

johnnyb
08-24-2004, 08:26 AM
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

mindlessLemming
08-24-2004, 10:09 AM
Not gonna happen with CSS

rmedek
08-24-2004, 10:34 AM
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...

johnnyb
08-24-2004, 08:25 PM
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

rmedek
08-24-2004, 10:15 PM
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:
http://richardmedek.com/temp/red-bg.jpg
and the original at 7.7k:
http://www.johnbeales.com/test/red-bg.jpg

johnnyb
08-24-2004, 10:30 PM
pretty good - I'll have to figure out how to do that. Usually I just increase the compression of the whole image.

Thanks,

John

]|V|[agnus
08-26-2004, 02:29 AM
Twice the bandwidth... that's two times a handful of KB!!!

:eek:


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

rmedek
08-26-2004, 04:07 AM
No, no!!! Don't make fun of me yet, I've almost got it down to 5.6k! :D
Seriously, I have never laughed so hard reading a coding forum before...

]|V|[agnus
08-26-2004, 04:17 AM
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?

:D

rmedek
08-26-2004, 04:39 AM
<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 (http://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.

]|V|[agnus
08-26-2004, 05:00 AM
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%...

rmedek
08-26-2004, 05:26 AM
I've edited my post to reflect my actual views :)

mindlessLemming
08-26-2004, 05:35 AM
|V|[agnus']
THINK OF THE BANDWIDTH COSTS! NO, THINK OF THE CHILDREN... THE CHILDREENNNNNN
ROFL :D
I wonder if George realises that by not having a general chat forum, he's forcing us to let out our stupidity in random places... :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum