1

i want to have the gradient as background image like this

enter image description here

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

Mirage
  • 30,868
  • 62
  • 166
  • 261
  • 2
    What problem are you having? What have you tried? – Marcin Jul 19 '11 at 12:01
  • 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 – Mirage Jul 19 '11 at 12:06

3 Answers3

5

http://gradients.glrzad.com/

OR

http://www.w3schools.com/css/css_background.asp

m4tx
  • 4,139
  • 5
  • 37
  • 61
3

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:

spliter
  • 12,321
  • 4
  • 33
  • 36
  • thanks splitter , i like that but the quality of background image is showing very bad , how can i increase the quality – Mirage Jul 19 '11 at 12:38
  • if the quality of the image is not good, this might mean you are on WindowsXP and using IE7 or IE6. To workaround the issue with that combination, you might need to take a look at MSIE's proprietary AlphaImageLoader behavior. – spliter Jul 19 '11 at 12:44
  • I am using window7 , i think i need to create the new high resolution image for that. Can i get some from web – Mirage Jul 19 '11 at 12:54
0

I would do it using a div or other element at the top of the page to give you the 'bar' and use a gradient background image, attached to the body in your css, aligned to the bottom and repeated.

body{
background:url(yoururl.png) repeat-x bottom;
}

For the 'bar', use the following CSS for the same style effect...

.topbar{
position:relative;
top:0px;
left:0px;
height:30px; /* or whatever height you want */
}

Apply your colours and borders to the bar however you see fit.

Hysterix
  • 11
  • 1