Open Source Tutorials - Open Source Training
Open source training & tutorials from experienced, passionate people
chrome icon firefox icon ie icon opera icon safari icon Sings in these Browsers
A- A A+

By A Web Design

Welcome, Guest
Username Password: Remember me

Color gradient background
(1 viewing) (1) Guest
All your queries regarding CSS will be solved in this forum
  • Page:
  • 1
TOPIC:

Color gradient background

Color gradient background 1 year, 3 months ago #517

  • isaac
  • OFFLINE
  • Senior Boarder
  • Posts: 64
  • Karma: 0
Hi, can anyone point me a way of doing color gradient background in CSS, i am sure i have seen it before somewhere, i have googled it but cant find anything, can anyone help?

I want color #FFFFFF at the top
going into color #000000 at the bottom, many thanks.

Re: Color gradient background 1 year, 3 months ago #528

  • isaac
  • OFFLINE
  • Senior Boarder
  • Posts: 64
  • Karma: 0
You can make a .gif or .png with transparency, and then create your gradient, overlay and tile this on top of your background color. If you want a vertical gradient running horizontally, the image only needs to be 1px wide and as tall as the gradient and repeated on the x-axis. For a horizontal gradient running vertically, vice a versa... For example:

body {
background-color:#000000;
background-image:url{your-vertical-gradient-image.gif);
background-repeat: repeat-x;
}
  • Page:
  • 1
Time to create page: 1.18 seconds
OSV Newsletter


Receive HTML?

NOTE: To prevent subscription to the OSV newsletter, uncheck the checkbox above.
Guest Blog for OSV
Free Ebook Download