Re: [css-d] background image - repeat, flip horizontal and vertically
On Tuesday, July 13, 2010 7:24:41 am Chris Blake wrote: > Hi, > > Since that took a while I have done some research. > Flipping it seems impossible so I went for the 100% width, maintain > aspect ratio idea. > The answer isn't great here too but there is some hope in the way of > CSS3 background-size: 100%; (that will keep the aspect ratio). Only > supported by Safari, there is a firefox one (-mozilla blah blah blah) > but I couldn't get it to work. It'll need javascript but I couldn't > even find an answer with that that didn't involve adding wrappers, > even tables!. Case closed :-( > What about just doubling the image? Go into any simple graphics program, select all, copy, make the image bigger, paste, flip, and then you have something you can repeat. It would make the image twice as big, which could be a problem depending on your target audience's bandwidth. But it would be a lot easier than the other options you presented. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image - repeat, flip horizontal and vertically
Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( BR, CB On 13/07/2010, at 5:22 PM, Chris Blake wrote: > Hi, > > Ok I have an image for my background. It's repeating but because it's > not a tiling pattern it looks odd if you are zoomed out so far that > you can't see it. One option could be to remove the repeating and have > some kind of effect, e.g. gradient, that dissolves the image into a > suitable background colour. But I don't really want to do that. What > I'd like is to flip the image horizontally and vertically when it is > repeated so that the images are seamless (mirrored). I have found some > CSS that will flip an image but not that's not really what I want. I > think it's going to involve some javascript and CSS so can anyone help > with pointers? > > TY, CB > __ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image - repeat, flip horizontal and vertically
Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
