Link to home
Start Free TrialLog in
Avatar of Elton Brown
Elton BrownFlag for Canada

asked on

How do I create a scalable gradient background?

How do I create a gradient that travels vertically and horizontally. The real problem is I can create the gradient but how long should the jpg be? Is there an easy way to create a gradient background without have to deal with determining the length?

Avatar of Eternal_Student
Flag of United Kingdom of Great Britain and Northern Ireland image

Have a look at this:

I have never implemented something like this but in theory it is possible.
Avatar of Elton Brown


Thank you Eternal_Student for replying!

The information you provided is great for I guess for JPGS.
I created a gradient (46x130). In order for the gradient to fill the background should I make the gradient (46x768) allowing it to repeat across the background?
Avatar of gamebits
Flag of Canada image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
If you just want a background to repeat on your document you would do:

body{background:url(image/name.jpg) repeat-x top left}

or repeat-y depending if horizontally or vertically, you would then only need a 1px [height or width - depending] graphic that would repeat on your background.

Thanks gamebits!
Thanks for the points and the grade.