PDA

View Full Version : centering a div using absolute positioning



Binji
March 12th, 2007, 07:58 AM
I know about the trick with auto left&right margins but i dont see how i can use this here:
i would like to have a linear gradient background which i scaled to 100% width&height. And now the only way to put something on top of it is using absolute positioning as far as i know. And its hard as hell to center something using it. Any ideas?

duncanhall
March 12th, 2007, 11:30 AM
If you want a linear gradient background, just set your page up something like this:



body {
margin: 0;
padding: 0;
background: url('images/bg.png') repeat x;
}


That will set an image repeating across the x axis, but not the y. Your image could be a gradient slice thats 20px wide and 400px high. This will fade the colour from top to bottom. If you want your gradient slice to be taller than about 500px (ie bigger than an 800 x 600 res), set your body overflow property to 'hidden'.