Question

i want to have the gradient as background image like this

how can i achieve that

EDIT:
I want to stretch down to bottom , but if i repeat it then i see the top bar gain , i want that dark portion remain at bottom and central part expands

Answer 1

If you really-really need to achieve this with background image, here is an example.
Of course it doesn’t work everywhere — you need JS polyfill to make browser that don’t support background-size property happy. I would recommend jQuery Backstretch for this.

But, what you really want to do (I hope so, at least) is to make it as flexible as possible and thus, you should take a look at this or this CSS gradients tutorial instead of the image. And, of course, you can use one of the CSS gradients generator like:

• http://gradients.glrzad.com/
• http://www.colorzilla.com/gradient-editor/
• http://css3please.com/. This one is useful for CSS3 in general.