[WSG] Background image alignment - percentages and scalable elements
Hi, I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div I have a collection of classes (called percent0 to percent100) which have a nice gradiated background image. I'm trying to position the background image on the left of the element so that it covers, in this example, 20% of the element. As you will have guessed this is for a statistics-type application. I've tried all sorts - aligning left/right positive/negative margins etc. As the element needs to be scalable the background should move as well, but keep it's ratio with regard to the width of the element. Does anyone have any ideas? Thanks Chris ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background image alignment - percentages and scalable elements
Hi Chris, Not sure exactly what you mean but this quick sample may help: http://www.maxdesign.com.au/presentation/percentage/ The background images scale based on viewport size. Only tested on mac Safari... If this is what you are after, the key is to create large images and use percentages of the images too. In this case I used 1000px wide images (due to laziness) but you should use wider ones in a real site to cover very wide monitors. Russ Hi, I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div I have a collection of classes (called percent0 to percent100) which have a nice gradiated background image. I'm trying to position the background image on the left of the element so that it covers, in this example, 20% of the element. As you will have guessed this is for a statistics-type application. I've tried all sorts - aligning left/right positive/negative margins etc. As the element needs to be scalable the background should move as well, but keep it's ratio with regard to the width of the element. Does anyone have any ideas? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Background image alignment - percentages and scalable elements
Chris Taylor schrieb: I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div ... Chris, I don't know if I got the problem right, but I think Zoe's article abut Creating Liquid Faux Columns [1] covers a lot of the theme: http://www.communitymx.com/content/article.cfm?page=1cid=AFC58 Please provide an URL to a _minimal_ test case showing the problem you reported if it's not covered in this article. Another aspect: Due to a severe bug in Opera8, you can't use fractional percentage values for the offset of background images, for example, a background x-offset of 19.65% will be rendered at 1965%, that's really far off :) Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Background image alignment - percentages and scalable elements
Thanks everyone, I got it working. One again the standards ninjas prove their worth! Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: 27 June 2005 13:12 To: Web Standards Group Subject: Re: [WSG] Background image alignment - percentages and scalable elements Hi Chris, Not sure exactly what you mean but this quick sample may help: http://www.maxdesign.com.au/presentation/percentage/ The background images scale based on viewport size. Only tested on mac Safari... If this is what you are after, the key is to create large images and use percentages of the images too. In this case I used 1000px wide images (due to laziness) but you should use wider ones in a real site to cover very wide monitors. Russ Hi, I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div I have a collection of classes (called percent0 to percent100) which have a nice gradiated background image. I'm trying to position the background image on the left of the element so that it covers, in this example, 20% of the element. As you will have guessed this is for a statistics-type application. I've tried all sorts - aligning left/right positive/negative margins etc. As the element needs to be scalable the background should move as well, but keep it's ratio with regard to the width of the element. Does anyone have any ideas? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
