We help IT Professionals succeed at work.

How to Duplicate this Page Background?

sandshakimi
sandshakimi used Ask the Experts™
on
I want to duplicate the background of this home page, the slight gray gradient.

http://www.serve.gov/index.asp

I'm using Drupal, so what's the best approach?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
They are simply using a background image on the body of the document.

Your best bet is to create a gradient and then set it on the body like this:

body{    background:url("../images/your-gradient.png") no-repeat center top #FFFFFF;

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
Here is the gradient imageLight gray to white centered 1280 px wide
If it is a linear gradient (not radial) then you could create the gradient you want in Photoshop or gimp or some image program, take a 1px wide slice of it and then use that as your background image with the CSS that LZ1 posted except you would want to have repeat-x instead of no-repeat.  This will duplicate your 1px wide gradient all the way across the page with a very small image file size.

Height of the gradient would only need to be the number of pixels that it takes to get from grey to white.