Here's the site http://www.webshapes.org/public/templates/200810127343001198/index.html
How does this gradient hes using resize to the page. No matter what the browser window size is, the gradient always has the white box in the middle of the page. hows it do this?
1 answer
o.k.w
2165
8
points
points
It is not your typical gradient. Look at the actual background image here.
It is centered and repeated vertically with blue (#2E8BC4) as the fallback background color to give the effect.
Here's the exact CSS definition for body used:
body {
background: #2E8BC4 url(images/back_all.gif) repeat-y center;
font: 13px Arial, Helvetica, sans-serif;
color: #383838;
}
The entire page content are then enclosed in the DIV#content element width a fixed width of 712px which fits into the center gap of the background.
#content
{
margin: 0 auto;
background: #ffffff;
width: 712px;
text-align: left;
}
- That's is what I expected but I wasn't sure. How does he center the gradient?
- Please refer to the CSS codes in my updated answer :)
