zygoma — 2012-11-15T09:52:07-05:00 — #1
Buon giorno from 11 degrees C no Sun Wetherby UK...
Working on this tutorial http://www.maxdesign.com.au/articles/css-layouts/two-fixed/ I'm wanting to make sure i understand what this bit of code does:
background: url("layout-two-fixed-background.gif") repeat-y scroll 100% 0 #FFFFFF;
I get this is the bit of code that adds the grey repearting gif befind the right hand side column but what i dont get is this bit 100% O - is this like x y co-ordinates or something.
Thanks in advance,
richardaskew — 2012-11-15T10:47:50-05:00 — #2
I believe so, the 100% is the x co-ordinate. If you have Firefox install Firebug and you can play in browser.
dresden_phoenix — 2012-11-15T15:45:03-05:00 — #3
It'd probably be easier to understand if the image was an irregular shape.
As previously mention the first # refers to the X coordinate. Admittedly it's a little baffling, but when you use a bg position of 100% Y(Y can be any #, since we are repeating the bg vertically), the bg image's RIGHT edge is aligned to the right edge of the element. Conversely a position of 0 Y will align the LEFT edge of the image with the left edge of the element, and 50% Y aligns the CENTER of the image to the CENTER of the element.
Demystifying practice, what is happening here is that you are placing a vertically repeating bg image at the right most edge of your container and as such creating the visual the illusion of a 'column' on the right side.
zygoma — 2012-11-16T05:10:43-05:00 — #4
Brill tanks, another 24 caret gold answer from sitepoint
dr_john — 2012-11-16T08:09:08-05:00 — #5
Have you tried deleting the 100% 0 to see what happens?
I strongly suspect the code is actually giving the standard default values which you normally don't need to state.