Faux Column - Just Checking My Understanding

HTML & CSS
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:

#layout-two-fixed #content-container{

background: url(“layout-two-fixed-background.gif”) repeat-y scroll 100% 0 #FFFFFF;
float: left;
width: 900px;
}

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,
David

2

Hi David

I believe so, the 100% is the x co-ordinate. If you have Firefox install Firebug and you can play in browser.

3

It’d probably be easier to understand if the image was an irregular shape. :slight_smile:
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.

4

Brill tanks, another 24 caret gold answer from sitepoint :slight_smile:

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.